element中el-upload自定义上传

小鱼儿心语：昨天的太阳，晒不干今天的衣裳，不努力没人帮你实现梦想！

最近在写一个后台管理系统以及可视化页面，到目前为止基本完工，我想来和大家分享一些编码中遇到的问题，希望可以帮助大家少走一些弯路吧！

今天来说说element-ui框架中 el-upload 自定义上传的用法吧~

• 这是一个普通的表单弹框，点击上传执行操作；
• 废话不多说，直接看代码吧：

<template>
  <div class="app-container">
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.isDanger == 'Plotting' ? '危险源标绘' : crud.status.title"
      :width="crud.isDanger == 'Plotting' ? '1200px' : '500px'"
      :style="{ height: crud.isDanger == 'Plotting' ? '900px' : 'auto' }"
      :top="crud.isDanger == 'Plotting' ? '10vh' : '15vh'"
    >
      <el-form
        ref="form"
        inline
        :model="form"
        :rules="rules"
        size="small"
        label-width="110px"
        v-if="crud.isDanger == 'add'"
      >
          <el-form-item label="附件" prop="fileName">
          <el-upload
            ref="upload"
            :on-change="changeFile"   // 文件状态改变时的回调函数，添加文件、上传成功和上传失败时都会被调用
            :auto-upload="false"
            :limit="1"    //限制上传数量
            :headers="headers"  // 为请求地址添加请求头token信息
            :action="fileUploadApi + '?fileName=' + form.fileName"    // fileUploadApi是域名+请求地址
            :file-list="fileList"    //  上传成功的所有文件
            style="width: 320px"
          >
            <div
              class="eladmin-upload"
              :style="{ width: crud.editDanger == 'edit' ? '85px' : '70px' }"
              @click="fileList = []"    //  因为我限制上传数量为1，所以再想要更换时，需要将之前的文件信息清空
            >
              <i class="el-icon-upload" />{{
                crud.editDanger == "edit" ? "重新上传" : "上传"
              }}
            </div>
            <div
              slot="tip"
              class="el-upload__tip"
              style="
                display: inline-block;
                margin-left: 10px;
                vertical-align: top;
              "
            >
              可上传任意格式文件，且不超过100M
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
</template>

*以上是标签部分的展示，下面是js方法具体的使用：

<script>
  export default {
    data() {
      return {
        fileList: [],
        headers: { Authorization: getToken() },   // 请求头token信息
        fileNames: "",  //  自定义上传时参数
        file: "",   //  用来判断文件是否上传
      }
    }，
    computed: {
      ...mapGetters([ "fileUploadApi"]),   //  具体的vuex用法，可以查阅相关资料哦~
    },
    methods：{
        //  文件状态改变时的回调函数，添加文件、上传成功和上传失败时都会被调用
        changeFile(file, list) {
          let isLt2M = true;
          isLt2M = file.size / 1024 / 1024 < 100;
          if (!isLt2M) {
            this.loading = false;
            this.$message.error("上传文件大小不能超过 100MB!");  // 限制它的上传大小
            this.fileList = [];   // 不满足要求清空即可
          } else {
            this.file = file.raw;   // 若符合要求即上传成功，this.file处于有值状态
            this.fileNames = new FormData();  //   这步是很关键的，创建一个空对象赋值给fileNames 
            this.fileNames.append("avatar", file.raw);   // 通过append方法添加获取到的文件流
            this.isFileName = false;
            this.form.fileName = file.name;   // 将上传后的文件名称赋值给fileName ，作为参数传递给后台
            var obj = {};
            if (this.form.fileName) {
              obj.name = this.form.fileName;
              this.fileList.push(obj);   //  这一步操作是为了防止进度条完成之后文件的消失问题
            }
          } 

          // 接下来，调用后台接口进行上传文件

          //  根据具体情况而定，我这里因为有新增、修改不同的判断
          if (crud.formData.id && this.file) {
            //  因为上面已经初始化new FormData()赋值给fileNames，这里不在初始化，直接添加参数即可
            this.fileNames.append("parentId", crud.formData.id);    // 根据后台接口规定的参数进行传递，这里不做限制哦~
            // 调用后台接口
            danger
              .uploadFile(this.fileNames)
              .then((res) => {
                //  请求成功后的操作具体情况具体解决
                crud.data.forEach((item) => {
                  if (item.id == res.data.parentId) {
                    this.$set(item, "name", res.data.realName);
                  }
                });
              })
              .catch((err) => {
                console.log(253, err);
              });
          }
        },
    }
  }
</script>

• 以上自定义上传文件的操作就完成了，要特别注意的是，this.fileNames = new FormData();初始化很重要哦~，具体看以上代码，都有详细的备注！

希望对大家有帮助，有什么不对的地方，请及时与我联系，第一时间给大家回复，互相学习，互相进步！关于下载文件的使用我也已经更新完成，我的文章对你有用的话，记得关注我呦~