vue+elementUI的upload組件上傳文件的方式

項目中需要上傳文件,用的vue+elementUI,使用的上傳組件是elementUI的el-upload組件,用到過的上傳方式有兩種

1.上傳到阿里雲,再把返回的連接給后端

2.以formdata的方式直接傳給后端

現在介紹下這兩種上傳方式

1.上傳阿里雲

<el-upload
 class="avatar-uploader"
 :class="{disabled4:uploadDisabled4}"
  list-type="picture-card"
  action
  :before-upload="beforeAvatarUpload"
  :on-success="handleAvatarSuccess4"
  :on-preview="handlePictureCardPreview4"
  :on-remove="handleRemove4"
  :http-request="upLoadFile4"
 >
  <i class="el-icon-plus"></i>
</el-upload>

　　

upLoadFile4的方法如下,其中client 是OSS對象,里面的內容,accessKeyId、accessKeySecret、oss_path等是后端獲得后，我通過API從后端調用的，最后通過client.put方法，將文件上傳到阿里雲，阿里雲返回圖片的地址，然后把地址通過API給后端。
這里注意的是action不能少，可以不填值，使用到http-request upload組件提供的自定義方法事件。

  upLoadFile4(file) {

    let client = new OSS({

      endpoint: this.endpoint,

      accessKeyId: this.accessKeyId,

      accessKeySecret: this.accessKeySecret,

      stsToken: this.securityToken,

      bucket: this.bucket_name

    });

    let storeAs = this.oss_path + file.file.name;

    client.put(storeAs, file.file).then(res => {

      let imageUrl4 = {

        path: res.name,

        url: res.url

      };

      this.ruleForm.imageUrl4 = imageUrl4;

      this.imageUrl4 = imageUrl4;

    });

2.以formdata上傳

template代碼

<el-form
      ref="regeditForm"
      :model="regeditForm"
      :inline="false"
    >
      <el-upload
        multiple
        style="width:350px"
        class="upload-demo"
        ref="upload"
        :file-list="fileList"
        :on-change="fileChange"
        :on-exceed="handleExceed"
        accept=".war"
        action
        :http-request="httpRequest"
        :auto-upload="false"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
      >
        <el-button size="mini" type="primary">點擊上傳</el-button>
        <div slot="tip" class="el-upload__tip">只能上傳war文件</div>
      </el-upload>
      </el-form-item>
      <el-form-item style="text-align:left;width:430px">
        <el-button type="primary" @click="register('regeditForm')">提交</el-button>
      </el-form-item>
</el-form>

　　

　　方法代碼

httpRequest(param) {
      console.log(this.fileList);
      let fileObj = param.file; // 相當於input里取得的files
      let data = new FormData(); // FormData 對象
      data.append("file", fileObj); // 文件對象
      data.append("name", this.regeditForm.name);
      data.append("description", this.regeditForm.description);
      data.append("url", this.regeditForm.url);
      register(data).then(res => {
        // console.log(res);
        if (res.data.msg == "app上傳成功") {
          this.$alert("url地址是" + res.data.result, "部署成功", {
            confirmButtonText: "確定",
            callback: () => {}
          });
        }
      });
    },

　　

register(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$refs.upload.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
 },

　　

export function register(data) {
    return request({
      url: '/app/add',
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      data
    })
}

　　

 這塊的重點是1.this.$refs.upload.submit();  2.FormData 

1.  當在upload上添  http-request="httpRequest"  自定義方法時，點擊表單提交的時候使用  this.$refs.upload.submit(); 會觸發自定義的方法

2. new FormData() 實例化formData實例，使用append把數據添加進去

3. 接口請求定義頭部的  'Content-Type': 'multipart/form-data'