elementUI 文件上传与VUE input file事件绑定的问题

Question

第一个问题， element ui 文件上传 通过action 设置提交地址。 然后通过:data加上参数， 服务器拿不到图片。
服务器应该写的是直接从form中获取 参数和图片。前端应该怎么写和服务器匹配？
第二个问题， 如果没有办法与前端无法解决element 的问题的话。 怎么使用vue 实现如下效果

        <input type="button" value="" onclick="upload.click()" class="imgBtn">
        <input type="file" accept="image/*" id="upload" name="upload" style="display:none">

点击button 的时候出发file 的事件

在这先谢谢了~~

Answer 1

1.action 是提交地址，data是额外参数。服务器可以拿到的，我写的

<el-upload
  class="avatar-uploader"
  action="1.php"
  :data="{'aaa':111}"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

测试1.php:

<?php
var_dump($_FILES);
var_dump($_REQUEST);
?>

返回数据如图:

2.点击button触发file就是file.click()，然后file的css设置隐藏

<button class="btn" onclick="upimg()">点我上传图片</button>
var myfile = document.getElementById('file');    

    function upimg(){                    
            myfile.click();
        }

自己写的看看我以前答的多图上传和图片上传预览
推销一下我的博客今天刚写的图片上传链接