普通上传

Posted 2021-03-16 0520euv

使用的是element-ui的upload插件。

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>

　　他的请求地址写在了acion里面，与实际请求不符合，后查询了相关事件，改为了：【加了:http-request， acion里面可以随便写】

                         <el-upload
                            action="123"
                            ref="uploadq"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :http-request="UploadFile"
                          >        

使用formData进行处理

       UploadFile(param) {
        this.file = param.file;
        this.key = param.file.name;
        let form = new FormData();
        form.append("file", this.file);
        form.append("key", this.key);
        APIFILE.fileUpload(form).then(result => {
          if (result.code === 0) {
            this.urlPath.push(result.imgUrlPath);
          }
        }
        ,err=>{
            this.$message.error({
              showClose: true,
              message: err.toString(),
              duration: 2000
            });
          }
        ).catch(error=>{
          this.$message.error({
            showClose: true,
            message: "请求出现异常",
            duration: 2000
          });
        })
      },

 

还有一种是input把type改成file。

　　　　　　　　　　　　　　　　　 <input
                            type="file"
                            name
                            value
                            @change="tirggerFile($event)"
                            id="hiddenInput"
                          />      

　　

tirggerFile（event）{
     let file = event.target.files[0];
        this.files = file;
        this.keys = file.name;
        let param = new FormData();
        param.append("file", this.files);
        param.append("key", this.keys);
    //后面代码与upload类似，请求后端。略过。
}