Vue+wangeditor富文本+element——--上传+下载文件+图片预览

一：上传文件

HTML

<el-upload class="upload-demo" action="haircut/upload" :on-preview="handlePreview"
                      :on-remove="handleRemove" :before-upload="handleBeforeUpload" :on-success="handleSuccess"
                      :before-remove="beforeRemove" :limit="1" :file-list="fileList">
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>

js

fileUrl: '', //文件地址
        fileUrlName: '', //文件名称
        inputContent: '', // 内容
//——————————————————————————————————————————————
handleRemove(file, fileList) { // 文件列表移除文件时的钩子
        console.log(file, fileList)
        let that = this
        that.inputContent = ''//清除富文本内容
        that.fileUrlName = ''
        that.fileUrl = ''
      },
      handleBeforeUpload(file) {
        //1MB=1024*1024(1MB=1024KB 1KB=1024MB)
        const is2M = file.size / 1024 / 1024 < 2;
        //限制文件上传大小
        if (!is2M) {
          this.$message.error("上传大小不能超过 2MB!");
        }
        // return false
      },
      handleSuccess(response, file, fileList) { // 文件上传成功时的钩子
        if (response.code === 100) {
          console.log(fileList[0].name)
          this.fileUrlName = fileList[0].name//文件名
          // this.inputContent = response.info.fileUrl
          this.fileUrl = response.info.fileUrl
          this.inputContent = fileList[0].name
        }
      },
      handlePreview(file) { // 点击文件列表中已上传的文件时的钩子
        console.log(file)
      },
      // handleExceed(files, fileList) {
      //   this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      // },
      beforeRemove(file, fileList) { // 删除文件之前的钩子
        return this.$confirm(`确定移除 ${file.name}？`)
      },

下载文件（因为.txt会直接在浏览器里