Vue上传文件

创建文件new File()

File()构造器创建新的File对象实例

// 语法
let myFile = new File(bits, name[, options])

• bits 一个包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。

• name USVString，表示文件名称，或者文件路径

• options 可选

  选项对象，包含文件的可选属性。可用的选项如下：

  • type: DOMString，表示将要放到文件中的内容的 MIME 类型。默认值为 "" 。
  • lastModified: 数值，表示文件最后修改时间的 Unix 时间戳（毫秒）。默认值为 Date.now()。

// 示例
let myFile = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

IE浏览器下new File()无效的解决方法，使用new Blob()替代

**Blob()** 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组

// 语法
let aBlob = new Blob( array, options );

• array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。

• options

  是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：

  • type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
  • endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持blob中保存的结束符不变

// 示例
let aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
let oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

文件上传new FormData()

formData append()

FormData 接口的**append()** 方法 会添加一个新值到 FormData 对象内的一个已存在的键中，如果键不存在则会添加该键。

// 语法
formData.append(name, value);
formData.append(name, value, filename);

• name value中包含的数据对应的表单名称。

• **value **表单的值。可以是USVString 或 Blob (包括子类型，如 File)。

• filename可选 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候， Blob 对象的默认文件名是 “blob”。 File 对象的默认文件名是该文件的名称。

代码实现

• 使用ElementUI中文件上传组件
• 自定义请求
• params中获取的文件是只读属性，如果想要重命名文件名，需要使用new File()或者new Blob()重新创建文件
• 如果不需要重命名文件名，直接使用formData.append('file', file)，传递的文件名就是上传的文件名

<el-upload class="upload-demo" action="#" :http-request="httpRequest" :show-file-list="false" accept=".jpg, .jpeg, .png">
    <el-button slot="trigger">上传</el-button>
</el-upload>

httpRequest(params) {
    const {file} = params
    let formData = new FormData()
    /* 如果需要重命名获取的文件名，需要重新创建文件 */
    // 说明是 IE 浏览器
    if ('ActiveXObject' in window) {
        let file = new Blob([params.file])
        formData.append('file', file, 'test.txt')
    }
    // 说明不是 IE 浏览器
    else {
        let newFile = new File([params.file])
        formData.append('file', newFile, 'test.txt')
    }
    
    /* 如果不需要重命名文件，直接使用
    	formData.append('file', file)
    */
    // 上传文件时要设置请求头
    const config = {
        headers: { 'Content-Type': 'multipart/form-data' },
    }
    axios.post('/upload', formData, config).then().catch()
}