之前开发多页面应用时,用的是jQ插件。
现在,使用的是vue采用单页面模式,那么怎么上传呢?
用的相关技术是
前端
1.input file控件
2.file对象
3.FileReader对象
4.FormData对象
5.axios
6.canvas
后端
就按照相应的后台语言进行文件接收
代码
<template>
<div>
<form id="formid">
<label for="resource">上传文档</label>
<input @change="preview" type="file" id="resource" name="resource" ref="resource">
<button type="button" @click="upload()">上传</button>
</form>
<div id="test" style="width:100px;height:100px">
</div>
</div>
</template>
<script>
import $ from 'jquery'
export default {
methods:{
upload(){
//file对象
var file=this.$refs.resource.files[0]
var formData = new FormData() // FormData 对象
formData.append('file',file)
this.$http.post('http://localhost/service/uploadImage', formData, {
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
transformRequest: [function (data) {
return data
}],
onUploadProgress: function(e) {
let percentage = Math.round((e.loaded * 100) / e.total) || 0
console.log(e, percentage)
}
}).then((response) => {
// if (response.data.status) {} else {
//}
}).catch(function (error) {
console.log(error)
})
},
//预览并压缩
preview(){
var img = new Image();
img.onload = function () {
// 当图片宽度超过 400px 时, 就压缩成 400px, 高度按比例计算
// 压缩质量可以根据实际情况调整
var w = Math.min(400, img.width);
var h = img.height * (w / img.width);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 设置 canvas 的宽度和高度
canvas.width = w;
canvas.height = h;
// 把图片绘制到 canvas 中
ctx.drawImage(img, 0, 0, w, h);
// 取出 base64 格式数据
var dataURL = canvas.toDataURL('image/png');
$('#test').css('background', 'url('+dataURL+')');
};
var file=this.$refs.resource.files[0]
//读取文件
var reader = new FileReader();
reader.onload = function(e){
var data = e.target.result;
img.src=data
}
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>