FCAT

Appearance

文件上传流程 ​

文件数量业务自动流程提交文件方式
单个文件选择文件后直接自动上传至服务器action提交
多个文件选择文件后，然后提交表单给服务器axios自定义提交

el-upload中的fileList解析。 ​

  • vue实例中的 fileList

name： url：文件的地址，这里element官网提供的模板中，这个url是一个链接，那么，如果url是本地地址呢？

js
export default {
    data() {
        return{
            fileList: [{name: 'food1.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        }
    },
}
export default {
    data() {
        return{
            fileList: [{name: 'food1.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        }
    },
}

用upload提交文件的两种方式： ​

  1. 用action='url’方式

使用element的文件模块时，使用了手动上传的方法，官网上的示例是直接使用 this.$refs.upload.submit() 直接请求后台，直接在action属性中写出后台地址即可，但是这种方式无法获取后台响应结果。

  1. 用 :http-request 方式

element官方的解释 :http-request 覆盖默认的上传行为，可以自定义上传的实现，可以提交后获取后台的相应结果。

怎么得到文件对象？

  1. 可以通过ref获取上传的文件对象，添加到FormData对象中，用axios提交。
js
let file = this.$refs.upload.uploadFiles.pop().raw;//这里获取上传的文件对象
let file = this.$refs.upload.uploadFiles.pop().raw;//这里获取上传的文件对象
  1. 可以通过this.fileList获得文件上传对象，然后条件到FormData对象中。
  1. 用 on-change 属性，文件列表变化时，将文件赋值给fileList，调用axios接口提交。
html
js

业务需求逻辑 ​

1. 图片预览 ​

2. 文件上传实时进度追踪显示 ​

3. 上传前钩子函数 ​

  • 限制文件数量

  • 限制文件类型

  • 限制文件大小