vue+element-ui上传图片点击按钮上传并带参数给后台formData格式

之前做的图片上传需求是自动上传并且只带header，这次需要传参数给后台并且格式是formData，非自动上传，而是点击按钮上传，让我琢磨了半天。

需求图片如下

html代码如下

    

        
    

    
    
    
    
    

    
    

    

    
    
                                
        
    
    
    

        开始上传
    
    

:auto-upload="false" 取消自动上传，:headers="headers"，

this.headers = {

"Content-Type": "multipart/form-data"

};设置header

js效果实现如下：

imgBroadcastChange(file, fileList){
        // debugger
        this.file = file.raw;
        this.fileName = file.name;
    },
    uploadSuccess(res, file) {
    },
    startUpload(){
        this.resData = {
            uid: localStorage.getItem("uid"),//用户登录之后服务器返回的用户唯一uid
            token: localStorage.getItem("token"),//用户登录之后服务器返回的标识用户的token，这两个值有的没有的可以不加
            action:"uploadStationPictureUrl",
            station_id:this.imgStationId,
        };
        const formData = new FormData();
        formData.append("uid", this.resData.uid);
        formData.append("token", this.resData.token);
        formData.append("action", this.resData.action);
        formData.append("station_id", this.resData.station_id);
        formData.append('file', this.file);
        this.$api({
            method: "post",
            url: "/api.php/DeviceManage/index",
            data: formData,
          })
            .then(su => {
              if (su.data.code == 1) {
                  this.$TyMessage.success("上传成功");
                  this.imgList.push(su.data.picture_url);
              } else if (su.data.code == 300)  {
                this.$router.push("/login");
                this.$TyMessage.error(su.data.message);
              } else  {
                this.$TyMessage.error(su.data.message);
              }
            })
            .catch(err => {});
    },

在change函数中把file.raw存储下来，用于点击上传图片的时候传给后台，

const formData = new FormData();
        formData.append("uid", this.resData.uid);
        formData.append("token", this.resData.token);
        formData.append("action", this.resData.action);
        formData.append("station_id", this.resData.station_id);
        formData.append('file', this.file);

将数据格式转换成formData格式。