一、上传文件
1.vue项目
base64格式
onInputChange(el) {
var self = this;
let file=el.file;
let type=file.type.split('/')[0];
if(type === 'image') {
//将图片转化为base64
var reader = new FileReader();
reader.readAsDataURL(file); // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径,
reader.onload = function () {
var image = reader.result; // image即base64格式，后面调用后端请求传入image
let imageList=[];
imageList.push(image);
let imgData={
base64List:imageList}
upImg(imgData).then(res=>{
if(res.data.code===200){
let nowUrl=res.data.data.url;
self.newFiles.push(nowUrl);
self.filelist.push({
name: nowUrl,
url: nowUrl,
});
self.$forceUpdate();
self.$message.success(res.data.message)
}else{
self.$message.error(res.data.message)
}
})
}
}else{
self.filelist=[];
self.newFiles=[];
self.$message.warning('请正确上传图片！');
}
},
接口
//工位管理上传图片
export function upImg(formData) {
let newData=JSON.stringify(formData);
return request({
url: '/platform/leaseArea/upImg',
method: 'post',
headers:{
'Content-Type':'application/json'},
data:newData
})
}
一般格式
onInputChange(el) {
var self = this;
let file=el.file;
let data=new FormData();
data.append('file',el.file);
let type=file.type.split('/')[0];
if(type === 'image') {
//将图片转化为base64
upImg(data).then(res=>{
if(res.data.code===200){
let nowUrl=res.data.data.url;
self.newFiles.push(nowUrl);
self.filelist.push({
name: nowUrl,
url: nowUrl,
});
self.$forceUpdate();
self.$message.success(res.data.message)
}else{
self.$message.error(res.data.message)
}
})
}else{
self.filelist=[];
self.newFiles=[];
self.$message.warning('请正确上传图片！');
}
},
接口
export function upImg(formData) {
return request({
url: '/platform/leaseArea/upImg',
method: 'post',
responseType:'blob',
headers: {
'Content-Type': 'multipart/form-data'},
data:formData
})
}
2.微信小程序
base64格式
//上传图片
//定义一个点击事件
changePhotoe() {
var _this = this;
wx.chooseMedia({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
console.log(res);
// tempFilePath可以作为img标签的src属性显示图片
wx.showLoading({
title: '正在上传',
});
_this.setData({
filelist: res.tempFiles[0].tempFilePath,
isUpload: true,
})
wx.getFileSystemManager().readFile({
filePath: res.tempFiles[0].tempFilePath,
encoding: "base64",
success: function (res) {
_this.data.baseImg.push('data:image/png;base64,' + res.data);
//转换完毕，执行上传
wx.request({
url: app.serverUrl + '/wechat/svcVisitor/upImg',
header: {
"token": _this.data.token
},
data: {
base64List: _this.data.baseImg
},
method: 'POST',
success: function (res) {
console.log(res);
if (res.data.code == 200) {
_this.setData({
headUrl: res.data.data.url
})
wx.showToast({
title: res.data.message,
icon: 'none'
})
wx.hideLoading()
}
}
})
}
})
}
})
},
一般格式
changePhotoe() {
var _this = this;
wx.chooseMedia({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
wx.showLoading({
title: '正在上传',
});
_this.setData({
isUpload: true,
})
wx.uploadFile({
url: app.serverUrl + '/wechat/svcVisitor/upImg', //
filePath: res.tempFiles[0].tempFilePath,
name: 'file',
method: 'POST',
header: {
'content-type': 'multipart/form-data',
"token": _this.data.token
},
success(res) {
let data = JSON.parse(res.data);
if (data.code == 200) {
_this.setData({
headUrl: data.data.url
})
wx.showToast({
title: data.message,
icon: 'none'
})
wx.hideLoading()
} else {
wx.showToast({
title: data.message,
icon: 'none'
})
wx.hideLoading()
}
},
});
}
})
},
导出
exoportExcel(){
let searchData=this.searchData;
exportExcel(searchData).then(res=>{
const link = document.createElement('a')
const blob = new Blob([res.data], {
type: 'application/vnd.ms-excel'
})
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.click()
})
},
导出接口
export function exportExcel(formData) {
let newData=JSON.stringify(formData);
return request({
url: '/platform/accessCard/exportExcel',
method: 'post',
responseType:'blob',
headers:{
'Content-Type':'application/json'},
data:newData
})
}
导入
<el-upload id="upfile_loading" ref="upload" action="" style="display:inline-block;margin-top:10px;" :multiple="true" :http-request="importBtn" accept=".xls, .xlsx" >
<el-button type="primary" style="margin-left:10px;background-color:#8381FF;border-color:#8381FF;">批量导入</el-button>
</el-upload>
importBtn(el){
var self = this;
let data=new FormData();
data.append('file',el.file);
importExcel(data).then(res=>{
if(res.status==200){
self.getList();
self.getListTotal();
}
})
},
导入接口
export function importExcel(formData) {
return request({
url: '/platform/accessCard/importExcel',
method: 'post',
responseType:'blob',
headers: {
'Content-Type': 'multipart/form-data'},
data:formData
})
}