vue el-upload 上传图片

约定不等于承诺〃 2022-11-12 02:36 134阅读 0赞

<el-upload
      class="upload-demo"
      action="#"
      :before-upload="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
     :http-request="uploadImage"
     :limit=1
     :multiple="false"
      list-type="picture">
      <el-button size="small"  type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

handlePreview(file) {
            
             let fd = new FormData(); //通过form数据格式来传
            fd.append("Files", file); //传文件
             this.AppfromDataimage.Files=fd
          },
       handleRemove(file, fileList) {
           
            console.log(file, fileList);
            
          },
        uploadImage(file){
     
        }

<el-button type="primary" @click="submitimage(AppfromDataimage)">确 定</el-button>

//Api url 应该这样传参
    export function AddAppImage(data,AppSabb,AppType) {
        // debugger
        return request({
            url: '/AppImage/AddAppImage?AppSabb='+AppSabb+'&AppType='+AppType+'',
            method: 'post',
            data
        })
    }

### **AppfromDataimage 参数  记得定义 ** ###

submitimage(){
          this.handleRemove()
    //如果传参数 就这样进行传参 （this.AppfromDataimage 参数  记得定义）
    AddAppImage(this.AppfromDataimage.Files,this.AppfromDataimage.AppSabb,this.AppfromDataimage.AppType).then((res)=>{
               if (res.list) {
                  this.$message({
                    message: '添加成功',
                    type: 'success',
                  }) 
              
               }else{
                  this.$message({
                    message: '添加失败',
                    type: 'error',
                  })
               }
               
            })
        },

**所有参数 放到 params里面  **

export const importOrder = params => vueRequest({
        apiUrl: `${appConfigs.urlWebHttp}${prefix}/orderManager/importOrder`,
        params,
        type: 'POST',
        apiCode: 400024,
        isSendRsa: false,
        isUcode: true
    });

**    formData.append("filePath", val.file);  
    formData.append("mouldId", this.fileListId);**

// 导入订单方法
        async importOrderData(val) {
          let formData = new FormData();
            formData.append("filePath", val.file);
            formData.append("mouldId", this.fileListId);
          let { data, code, message } = await importOrder(formData);
          if (Number(code) === 0) {
            this.$message({
              type: "success",
              showClose: true,
              customClass: "customClass-confirm",
              message: "成功导入订单",
            });
          } else {
            this.$message({
              type: "error",
              showClose: true,
              customClass: "customClass-confirm",
              message: message,
            });
          }
        },