vue項目將file轉換成二進制流

前端在新增數據時，需要將附件和表單數據一起上傳，此時需要將文件轉換成二進制流傳給后端。記錄將文件轉換成二進制流

<el-form-item label="產品概況附件" :label-width="formLabelWidth">
  <el-upload
    ref="uploadProduct"
    class="upload-demo"
    :auto-upload="false"
    :limit="1"
    :on-exceed="handleExceed"
    :file-list="fileListProduct"
    :data="uploadFormProduct"
    :on-success="onSuccess"
    :on-error="onError"
    :on-change="onChangeProduct"
    :before-remove="handleRemoveProduct"
    name="enterprise_product_file"
  >
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
  </el-upload>
</el-form-item>

<script>
export default {
  data() {
    return {
      // 上傳附件（產品概況）
      fileListProduct: []
    };
  },
  methods: {
    // 上傳
    handleExceed(files, fileList) {
      this.$message.warning(
        `當前限制選擇 1 個文件，本次選擇了 ${
          files.length
        } 個文件，共選擇了 ${files.length + fileList.length} 個文件`
      );
    },
    onSuccess(files, fileList) {
      this.$parent.findAllEnterprise();
      this.$message({
        message: "成功",
        type: "success"
      });
      this.handlerClose();
    },
    onError() {
      this.$message({
        message: "網絡錯誤",
        type: "warning"
      });
    },
    handleRemoveProduct(file, fileList) {
      return this.$confirm(`確定移除 ${file.name}？`).then(() => {
        // this.isUploadFileProduct = false
        this.fileListProduct.pop(file);
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    onChangeProduct(file, fileList) {
      // console.log(file)
      if (/.(txt)$/.test(file.name)) {
        this.$message({
          message: "不允許上傳以txt結尾的文件",
          type: "warning"
        });
        this.$refs.uploadProduct.clearFiles();
        return
      }
      // 當選擇好上傳文件時，將這個文件的信息push到數組中去
      this.fileListProduct.push(file);
    },
    // 新增
    addEnterprise() {
      // 將上傳的文件附件轉成二進制轉給后台 this.form就是表單輸入框的內容
      const formData = new FormData();
      Object.keys(this.form).forEach(key => {
        if (key === "enterprise_product_file") {
	  // 判斷是否是產品概況的字段，是的話將剛剛push進fileListProduct轉換成二進制給后台
	  // 注意，需要的是寫到raw，否則傳給后端就是"[object, object]"
          formData.append(key, this.fileListProduct[0].raw);
        } else {
	  // 若是表單中的字段，則直接append進去
          formData.append(key, this.form[key]);
        }
      });
      // 調用vuex中的方法，將formData傳給后端。此時上傳的附件已經轉換成二進制流
      this.addEnterpriseCustomers(formData)
        .then(() => {
          this.$message({
            type: "success",
            message: "保存成功!"
          });
          this.$parent.findAllEnterprise();
          this.handlerClose();
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "網絡異常"
          });
        });
    },
    // 修改
    updateEnterprise() {
      const formData = new FormData();
      Object.keys(this.form).forEach(key => {
        if (
          key === "enterprise_product_file" &&
          this.fileListProduct.length !== 0
        ) {
          formData.append(key, this.fileListProduct[0].raw);
        } else if (
          key === "enterprise_introduct_file" &&
          this.fileListIndoc.length !== 0
        ) {
          formData.append(key, this.fileListIndoc[0].raw);
        } else {
          formData.append(key, this.form[key]);
        }
      });
      const params = {
        id: this.form.enterprise_pk_id,
        form: formData
      };
      // delete params.form.enterprise_pk_id
      this.updateEnterpriseCustomers(params)
        .then(() => {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.handlerClose();
          this.$parent.findAllEnterprise();
        })
        .catch(() => {
          this.$message({
            message: "網絡錯誤",
            type: "warning"
          });
        });
    }
  }
};
</script>