vue之XMLHttpRequest上传文件
首先得有一个控件用来选择文件<input type="file" accept="image/*" @change="fileChanged" ref="file">也可以隐藏file控件然后用其他事件触发file控件的chagne事件this.files = this.$refs.file
首先得有一个控件用来选择文件
<input type="file" accept="image/*" @change="fileChanged" ref="file">
也可以隐藏file控件然后用其他事件触发file控件的chagne事件
this.files = this.$refs.file.files //将控件的值赋值给成员变量,可以不用
const formData = new FormData()
formData.append("file0", this.files[0])//files[0]就是文件元素,里面有文件名,大小等属性
const xhr = new XMLHttpRequest()
xhr.open('POST','server url', true) //server url自行填充,true代表异步
//发送完之后执行的函数还有其他接口可以设置比如timeout、error
xhr.onload = () => {
const response=JSON.parse(xhr.response)//response就是服务器返回的信息
}
xhr.send(formData)//执行发送指令
或者
let config = {headers:{'Content-Type':'multipart/form-data'}}
this.axios.post(serverUrl,
formData, config
).then(res=>{
console.log(res.data)
}).catch(error=>{
return false;
})
发送文件要发送form-data类型,默认的类型只能传文本
普通的post请求
//初始化post数据
let postData = this.$qs.stringify({
action:"getinfo",
userID:localStorage.getItem('user_id'),
token:localStorage.getItem('token')
})
//qs的使用需要import qs from 'qs';
//qs的使用需要Vue.prototype.$qs = qs;
//执行post
this.axios({
method:'post',
url:'server url', //server url自行填充
data:postData
}).then(res=>{
if(0 == res.data.statusCode){//服务器返回的字段,代表返回值
localStorage.setItem('userinfo', res.data.userinfo)//服务器返回的字段,代表返回信息
}
else {
console.log('error' + res.data.statusCode)
}
}).catch(error=>{
console.log('访问服务器失败')
console.log(error)
})
//另外记录一个proxyTable的问题
proxyTable: {
'/api': {
target:'http://192.168.0.121'
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
。。。
}
本来直接修改vue文件可以立即生效,但是修改proxyTable后没有立即生效,以为出bug,后来结束掉npm run dev,再次npm run dev就ok了
更多推荐
所有评论(0)