一、普通的file方法上传（可以上传文档）
1.创建一个input表单
<input type="file">
2.在js里面写
(1)获取input框
let inp=document.querySelector("inp")
inp.onchange=function(e){
let form=new FormData();
form.append(e.targer.files[0].name,e.target.files[0])
//获取form里面传的地址
console.log(form.get(e.target.files[0].name));
通过发送axios将创建好的formData发送给后台
后台返回网络上的地址
axios.post("http://123.206.55.11000/upload",form)
后台返回的数据
{"code":1,"data":[{"name":"项目介绍","path":"http://123.206.55.50:11000/static/8YVs6HlKkSvAZXQ0ZAo32wep.png"}],"msg":"上传成功"}
}
二、base64方法的上传
inp.onchange=function(e){
let reader=new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload=function(){
//获取到的图片地址(database64里面的地址)
console.log(this.result);
axios.post("http://123.206.55.50:11000/upload_base64",{base64:this.result})
}
}
三、放到框架上面修改用户头像
1.获取用户信息赋给一个变量
注意需要判断的一个地方
在获取用户信息的时候需要判断现在页面中是否已经有用户信息了如果有的时候就不用再获取用户信息了
*getUserInfo({ payload }, { call, put, select }) {
let userInfoFlag = yield select(state => state.login.userInfoData); //获取到的用户信息
console.log(userInfoFlag); //获取到的用户信息
if(Object.keys(userInfoFlag).length){//判断用户信息是否有变化，如果有值就直接返回
return;
}
//否则的话就调用获取信息的接口
let data = yield call(userInfo); //发送接口获取用户信息
console.log(data);
yield put({ type: "upDateUserInfo", payload: data.data }); //获取到的信息给state
},
2.点击上传的时候获取到传的图片的地址
<input
type="file"
onChange={e => {
getFileData(e);
}}
/>
//触发的函数获取图片的路径
function getFileData(e) {
const data = e.nativeEvent.target.files;
let form = new FormData();
form.append(data[0].name, data[0]);
console.log(form.get(e.target.files[0].name));
axios.post("http://123.206.55.50:11000/upload", form).then(res => {
console.log(res.data);
if (res.data.code === 1) {
console.log(res.data.data[0].path);
setNewPath(res.data.data[0].path);//设置新的图片路径
}
});
}
//点击确定的时候发送axios请求把值传递给后台
props.upDataUserAvatar({
user_id: props.userInfoData.user_id,
avatar: newPath
});
后台发送接口更新用户新消息
*upDataUser({ payload }, { call, put }) {
let data = yield call(upDataUserSer, payload); //发送接口获取用户信息的状态
console.log(data);
if(data.code===1){//更新的成功之后再重新设置用户信息为空
yield put({type:"upDateUserDataReducer",payload:data});
//重新调用获取信息的方法更新页面
yield put({
type: "getUserInfo"
});
}
}
},
同步方法里面设置用户信息为空
upDateUserDataReducer(state,action){
return {...state,userInfoData:{}}
}
