文件上传原创

# 1.自动上传

<el-upload
  class="upload-demo"
  :on-success="handleSuccess"  //上传成功后的回调
  :before-upload="beforeUpload"
  action="/api/file/upload" //上传地址
  data                      // 请求参数
  accept=".jpeg, .jpg, .svg, .png, .webp"
  multiple
>
  <img :src="imgUrl" v-if="flag" style="width: 100%" />
  <i class="el-icon-upload"/>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip" style="color:red">只能上传jpeg, jpg, svg, png,
    webp文件,且大小不超过1M
  </div>
</el-upload>
        
<script>
export default {
  data() {
    return {
      data: {
          "biz": user_avatar
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 2. 手动上传

<el-upload
  class="upload-demo"
  :before-upload="beforeUpload"
  :http-request="upload" //手动上传
  drag
  action="#" //手动上传随遍填，不可为空
  accept=".jpeg, .jpg, .svg, .png, .webp"
  multiple
>
  <img :src="imgUrl" v-if="flag" style="width: 100%" />
  <i class="el-icon-upload"/>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip" style="color:red">只能上传jpeg, jpg, svg, png,
    webp文件,且大小不超过1M
  </div>
</el-upload>

async upload() {
      const formData = new FormData()
      formData.append('file', this.file)
      formData.append('biz', 'user_avatar')
      await changeAvatar(formData).then(res => {
        this.flag = true
        this.form.avatar = res.data
        this.imgUrl = res.data
      })
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 3. 上传前更改文件名

/**
 先获取到源文件的后缀名，然后新建一个文件，将文件名改为时间戳加后缀名，防止名称重复，最后把新文件作为参数进行上传
**/
beforeUpload(file) {
      const fileExtension = file.name.split('.').pop().toLowerCase()
      const timeStamp = new Date().getTime()
      const copyFile = new File([file], `${timeStamp}` + '.' + fileExtension)
      this.file = copyFile
    },

1
2
3
4
5
6
7
8
9

#前端

上次更新: 2024/01/14 16:27:31

← el-upload封装 mavon-editor局部引入→