Vue.js|Axios|图片Api上传|图片上传|Vue+Axios图片上传
Vue.js|Axios|图片Api上传|图片上传|Vue+Axios图片上传|Vue项目图片上传|前端图片上传|Html图片上传
·
Vue.js|Axios|图片Api上传|图片上传|Vue+Axios图片上传|Vue项目图片上传|前端图片上传|Html图片上传
**
不喜欢废话直接上代码，拿去用吧，直接运行
**
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linson文件上传</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<form id="myForm">
<input type="file" @change="Files">
<button @click="upload" type="button">上传</button>
</form>
<div>
<!-- 预览图片 -->
<img :src="imgsrc" width="500px">
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
imgdata: [],
imgsrc:''
},
methods: {
Files(object) {
this.imgdata = event.target.files[0];
this.imgsrc=URL.createObjectURL(this.imgdata);
},
upload() {
//转载请说明出处
//直接给接口表单数据 this.imgdata 是带不走文件的，不信你可以把param换成this.imgdata
//看看表单是不是空空如也因为js没有能力处理二进制文件
//FormData对象用以将数据编译成键值对，其主要用于发送表单数据，
let param = new FormData();
//通过append向form对象添加数据
//往里面注入数据 我用的接口是 imgtp的图床，人家文档里面给的参数是image必填，记得改
param.append('image', this.imgdata);
//param.append('chunk','0');//添加form表单中其他数据
//console.log(param.get('image')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
//添加请求头跨域这些，这个接口没问题的 -------------------------------------------------------------------By：Linson文件上传
//把这个接口改成自己的后端接口也可以上传的，亲。
axios.post('https://www.imgtp.com/api/upload',param)
.then(function (response) {
console.log("Linson：转载请说明出处",response.data.data.url);
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
}
})
</script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)