Vue+ElmentUI：前端实现文件(视频/图片)上传

---

后端实现

功能实现：

这个组件很简单。根据你的action的地址，提交post请求

el-upload本身可以发送各种内容（图片，视频等等），后端使用MultipartFile接受，发送文件过大时（比如视频）会失败，在后端链接中说明了如何解决

<template>
  <div>
    <el-upload :action="this.uploadUrl"
               list-type="picture-card"
               :auto-upload="true"
               ref="upload"
               multiple
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove"
               show-file-list>

      <i slot="default"
         class="el-icon-plus"></i>

    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%"
           :src="dialogImageUrl"
           alt="">
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    
    return {
      dialogImageUrl: '',
      dialogVisible: false,

      uploadUrl:'http://localhost:9000/management/good/upload/',
      deleteUrl:'http://localhost:9000/management/good/delete/'
    };
  },

  methods: {
    handleRemove (file) {
      axios.delete(this.deleteUrl+file.response.data.uri).then(response => {
      })

    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },


  }
}
</script>

介绍:

• list-type：文件列表的类型（横着的还是竖着的等等）

• multiple：选择文件是否支持多选
  

• auto-upload：是否在选取文件后立即进行上传

• limit：最大允许上传个数

• show-file-list：是否显示已上传文件列表

---

handleRemove 
handleRemove (file) {
      axios.delete(this.deleteUrl+file.response.data.uri).then(response => {
      })
},

handleRemove 点击删除会将前端显示的删除，之后你就要根据的后端，进行删除

---

handlePictureCardPreview (file) {
   this.dialogImageUrl = file.url;
   this.dialogVisible = true;
 },

放大你的那张图片

---