How to realize the function of File upload and download by Vue

This article mainly introduces Vue how to achieve file upload and download functions, the article is very detailed, has a certain reference value, interested friends must read it!

1. A tag download attribute

In H5, a download attribute has been added to the a tag to download the file directly, and the file name is the download attribute file name.

The download attribute only supports Google Chrome and Mozilla Firefox for the time being, and is not supported by other browsers

Download is a new property of H5, which was not previously available in H5.

2 、 URL.createObjectURL

The URL.createObjectURL () method creates a URL pointing to the parameter object based on the parameter passed. The life of this URL exists only in the document in which it was created, and the new object URL points to the executing File object or Blob object.

A File object is a file. For example, if I upload a file with the input type= "file" tag, then each file in it is a File object.

The Blob object is binary data, for example, the object created by new Blob () is the Blob object, or in XMLHttpRequest, if you specify responseType as blob, the return value is also a blob object.

Let URL = window.URL | | window.webkitURL;let downloadUrl = URL.createObjectURL (blob | | file)

3 、 URL.revokeObjectURL

The URL.revokeObjectURL () method releases an object URL created by URL.createObjectURL (). If the object is no longer needed, it is released, and after it is released, the object URL no longer points to the specified file.

DownloadUrl & & URL.revokeObjectURL (downloadUrl)

4. Vue.js uploads and downloads files

File upload: upload file (POST) file download: download file with link (window.open) binary stream download (GET) binary stream download (POST) import axios from "axios" export default {name: "attendPoint", data () {return {, file: null FileName: "test.xlsx"}}, methods: {/ / Select the file getFile (event) {this.file = event.target.files [0] }, / / upload file (POST) upload () {let url = "http://localhost:3000/upload/test"; let formData = new FormData (); formData.append (" name "," zhangsan "); formData.append (" age "," 18 ") FormData.append ("file", this.file) Let config = {headers: {"Content-Type": "multipart/form-data"}} axios.post (url, formData, config). Then ((res) = > {this.fileName = res.data.downloadUrl This.$message.success ("upload succeeded!");}) .catch (() = > {this.$message.error ("Please upload the file first!") })}, / / download the linked file (window.open) downloadLink () {if (this.fileName) {window.open ("http://localhost:3000/download/test?fileName=" + this.fileName)" }}, / / binary stream async downloadBlobByGet () {let urlGet = "http://localhost:3000/download/test?fileName=" + this.fileName; let fileData = await axios.get (urlGet, {responseType:" blob "}); let URL = window.URL | | window.webkitURL Let downloadUrl = URL.createObjectURL (fileData.data); let a = document.createElement ("a"); a.href = downloadUrl; a.download = this.fileName;// downloaded file name a.click (); a = null; downloadUrl & & URL.revokeObjectURL (downloadUrl) }, / / binary stream download (POST) async downloadBlobByPost () {let urlPost = "http://localhost:3000/download/post/test"; Let fileData = await axios ({method: "post", url: urlPost, / / request address data: {fileName: this.fileName} / / Parameter responseType: "blob" / / indicates the type of data returned by the server}) let URL = window.URL | | window.webkitURL Let downloadUrl = URL.createObjectURL (fileData.data); let a = document.createElement ("a"); a.download = this.fileName; a.href = downloadUrl; a.click (); a = null; downloadUrl & & URL.revokeObjectURL (downloadUrl) },},}. Btn-box {padding: 20px;} el-button, input {max-width: fit-content; display: block; margin: 20px;} above is all the content of the article "how to upload and download files in Vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!