关于elementui上传文章封面功能的实现

使用的代码是文件缩略图

用到的对应的事件：

on-change:文件状态改变时的触发的事件处理函数，这里给formData添加数据,formDaya是一个实例化对象，需要创建

limit：限制上传的图片个数，我设置的1

ref: vue获取dom对象的引用

思路：

先写完后端的upload接口，然后返回前端一个数据

{
    "filename": "filename",
    "url": "/public/uploads/bookImg/${filename}"
}

这样就能拿到url，即图片在服务器的地址

然后我们正常发送请求，增加视频的相关信息数据还是这个图片地址，请求后，后端存储到数据库

这里附上upload的上传请求代码，有些特殊

function uploadFIle(formData) {
  return requestUrl({
    url: '/upload',
    method: 'post',
    data: formData,
    headers: { 'Content-Type': 'multipart/form-data' }
  })
}

data就是formData对象

这里需要我们自己封装数据

请求头必须这样设置，因为是上传文件

总结就是前端发送两次请求，第一次获取图片的url，第二次将图片的地址添加给数据库

前端相关代码

html:

<el-upload action="#" list-type="picture-card" :auto-upload="false" ref="files" :on-change="addFile" :limit="1">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>

js:

export default {
  name: 'VideoCom',
  data() {
    return {
        // 其他代码省略
      // 上传封面相关
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      pit: {}
    }
  },
  methods: {
// 其他代码省略
// 保存新视频
    async submit() {
      if (this.pit instanceof FormData === false) {
        alert('请上传封面图片【必须】')
        return false
      }
      const fileData = await upload(this.pit)
      this.newData.videoImg = fileData.data.url
      const videoInfo = this.newData
      const { data: rel } = await createVideo(videoInfo)
      notification(rel.code)
      // 清空文件列表只是表面
      this.$refs.files.clearFiles()
      this.videoDialog.dialogVisible = false
      this.pit = {}
    },
    // 上传图片
    addFile(file) {
      const pit = new FormData()
      pit.append('videoImg', file.raw)
      this.pit = pit
    }
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    }
  }