enement ui 组件上传文件的方法 与 下载 以及回显

一、 DOM 样式

 <el-form-item label="管制文件">
              <el-upload
                class="upload-demo"
                action="/message/file/upload"  // 这里直接用组件的上传 api 写上自己的上传接口即可
                :on-preview="handlePreview"   //点击控制文件上传后的下载
                :on-remove="handleRemove"     // 文件列表移除文件时的钩子 function(file, fileList)
                :on-success="handsuccess"  // 上传成功的钩子  会有三个数据属性 下方有展示
                :before-remove="beforeRemove"   // 上传的文件移除
                multiple
                :limit="1"   // 限制文件上传个数
                :on-exceed="handleExceed"  // 限制文件上传个数点击事件
                :file-list="fileList" //data 绑定的值 重要 ！
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  上传管制通知相关文件,文件小于10M
                </div>
              </el-upload>
  </el-form-item>

二、 DATA 声明 数组

 fileList: [],

三、 ① 上传的方法与其他

   // 上传后成功的钩子
    handsuccess(response, file, fileList) {
      this.fileList.push({ name: file.name, url: response.data });
      this.form.roadRestrictionSaveOrUpdate.nrrTcFile = response.data;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击控制文件上传后的下载
    handlePreview(file) {
      this.PreviewrtFilezai(file.url, file.name);
    },
    // 文件下载控制台
    PreviewrtFilezai(val, name) {
      let valeURL = this.imgBaseUrl + val;
      let link = document.createElement("a"); // 创建元素
      link.style.display = "none";
      link.href = valeURL;
      link.setAttribute("download", name); //文件命名
      link.click(); // 点击下载
      window.URL.revokeObjectURL(valeURL);
    },

    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },          
  
    // 上传的文件移除
     beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
   //	文件列表移除文件时的钩子	function(file, fileList)
      handleRemove(file, fileList) {
      console.log(file, fileList);
    },     

② 编辑回显时候的赋值样式

   this.fileList = [
            {
              name: this.form.roadRestrictionSaveOrUpdate.nrrTcFile,
              url: this.form.roadRestrictionSaveOrUpdate.nrrTcFile
            }
          ];

样例：

   fileList: [
   {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com'}, // url 是你后端返回的文件后缀
   {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com'}  // url 是你后端返回的文件后缀
             ]