一、Vue上传文件
VUE是一个简约的面向数据的用户界面库，它也是一个非常好的前端框架，它提供了很多 UI 组件和插件来帮助我们快速开发应用程序。Vue上传文件主要使用 input 标签和file类型，需要注意的是，input 标签的 type属性必须是 "file"，而且必须要有 @change事件监听。
<template>
<div>
<input type="file" @change="uploadFile" />
</div>
</template>
<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
console.log(file);
}
}
}
</script>二、Vue上传本地文件存到缓存里
文件一般需要上传到服务器，为了减少上传时间，可以先将文件存到缓存里，在上传时再将缓存里的文件一并上传。在VUE中，可以使用 FileReader 对象将上传文件保存到浏览器缓存。
<template>
<div>
<input type="file" @change="readFile" />
</div>
</template>
<script>
export default {
methods: {
readFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const fileContent = reader.result;
localStorage.setItem('fileName', fileContent);
}
}
}
}
</script>三、Vue上传文件后展示
上传文件后，需要将文件展示出来。在VUE中，可以使用URL.createObjectURL()将文件转换成URL形式，然后将URL显示在页面上。
<template>
<div>
<input type="file" @change="showFile" />
<img :src="fileUrl" />
</div>
</template>
<script>
export default {
data() {
return {
fileUrl: ''
}
},
methods: {
showFile(event) {
const file = event.target.files[0];
const fileUrl = URL.createObjectURL(file);
this.fileUrl = fileUrl;
}
}
}
</script>四、Vue上传固定格式文件
为了保证后端的正确解析，可能需要上传固定格式的文件。在VUE中，可以使用accept属性限制上传的文件类型。
<template>
<div>
<input type="file" accept=".txt" @change="uploadFile" />
</div>
</template>
<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
console.log(file);
}
}
}
</script>五、Vue上传头像
上传头像时，需要对上传图片进行裁剪和压缩。在VUE中，可以使用vue-cropper插件、vue-photo-preview插件或者原生canvas进行裁剪和压缩。下面是使用vue-cropper插件进行头像上传的示例代码。
<template>
<div>
<vue-cropper
ref="cropper"
:guides="false"
:view-mode="2"
:auto-crop-area="0.8"
:background="false"
/>
<button @click="uploadAvatar">上传头像</button>
</div>
</template>
<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
export default {
components: { VueCropper },
methods: {
uploadAvatar() {
const cropper = this.$refs.cropper.$cropper;
cropper.getCroppedCanvas().toBlob(blob => {
console.log(blob);
});
}
}
}
</script>六、Vue上传功能
很多应用都需要上传文件，比如上传图片、上传附件等。在VUE中，可以使用axios、fetch等网络请求库实现上传功能。下面是使用axios实现上传的示例代码。
<template>
<div>
<input type="file" @change="uploadFile" />
<button @click="handleSubmit">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
formData: new FormData()
}
},
methods: {
uploadFile(event) {
this.file = event.target.files[0];
this.formData.append('file', this.file);
},
handleSubmit() {
axios.post('/upload', this.formData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>七、Vue上传文件到后端
将文件上传到后端需要使用ajax或者form表单提交，一般使用ajax。在VUE中，可以使用axios、fetch等网络请求库实现上传文件到后端。下面是使用axios实现上传文件到后端的示例代码。
<template>
<div>
<input type="file" @change="uploadFile" />
<button @click="handleSubmit">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
formData: new FormData()
}
},
methods: {
uploadFile(event) {
this.file = event.target.files[0];
this.formData.append('file', this.file);
},
handleSubmit() {
axios.post('/upload', this.formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>八、Vue上传图片
上传图片可以选择上传到服务器或者上传到第三方云存储。在VUE中，可以使用axios、fetch等网络请求库实现上传图片。下面是使用axios实现上传图片的示例代码。
<template>
<div>
<input type="file" accept="image/*" @change="uploadImg" />
<button @click="handleSubmit">上传</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
img: null,
formData: new FormData()
}
},
methods: {
uploadImg(event) {
this.img = event.target.files[0];
this.formData.append('img', this.img);
},
handleSubmit() {
axios.post('/upload', this.formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>九、Vue上传txt文件
上传txt文件时，需要对上传的文件进行处理（如编码转换等）。在VUE中，可以使用FileReader对象读取文件内容，并进行处理。下面是一个上传txt文件并读取文件内容的示例代码。
<template>
<div>
<input type="file" accept=".txt" @change="uploadTxt" />
<button @click="handleSubmit">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
txt: null,
formData: new FormData()
}
},
methods: {
uploadTxt(event) {
this.txt = event.target.files[0];
const reader = new FileReader();
reader.readAsText(this.txt);
reader.onload = () => {
this.formData.append('txt', reader.result);
};
},
handleSubmit() {
// 同八中的axios上传方式一致，这里不进行重复展示。
console.log(this.formData);
}
}
}
</script>十、Vue上传文件进度条
对于大文件上传的操作，需要有进度条来提示用户上传的进度。在VUE中，可以使用axios的onUploadProgress事件实现上传进度条。下面是一个上传进度条的示例代码。
<template>
<div>
<input type="file" @change="uploadFile" />
<button @click="handleSubmit">上传</button>
<div class="progress">
<div class="progress-bar" :style="{ width: uploadProgress + '%'}">
{{ uploadProgress }}%
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
formData: new FormData(),
uploadProgress: 0
}
},
methods: {
uploadFile(event) {
this.file = event.target.files[0];
this.formData.append('file', this.file);
},
handleSubmit() {
axios.post('/upload', this.formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: progressEvent => {
this.uploadProgress = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
)
}
})
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
this.uploadProgress = 0;
}
}
}
</script>
