uniapp选定文件或图片并上传——附前端js对上传图片blob和base64互转教程
代码】uniapp选定文件或图片并上传——附前端js对上传图片blob和base64互转教程。
·
uniapp选定图片上传
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
// console.log(res.tempFiles);
// let aaa = this.$tools.blobToDataURI(res.tempFiles[0],function(result){
// console.log(result);
let uploadTask = uni.uploadFile({
url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
},
complete: ()=> {},
fail: (res)=>{
console.log(res)
}
})
}
});
},
生产环境中使用文件上传
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
console.log(res);
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
console.log(res.tempFilePaths);
// 文件转换
// console.log(res.tempFiles);
// let aaa = this.$tools.blobToDataURI(res.tempFiles[0],function(result){
// console.log(result);
// 文件上传
let uploadTask = uni.uploadFile({
header: {
/* 这个地方每次都调用 */
"X-Access-Token": uni.getStorageSync('token')
},
url: uni.getStorageSync('BaseUrl')+'/index/upload', //仅为示例,非真实的接口地址
filePath: res.tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log(uploadFileRes);
console.log(uploadFileRes.data);
},
complete: () => {},
fail: (res) => {
console.log(res)
}
})
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '删除图片',
content: '确定要删除此图片?',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
后台接收:
https://blog.csdn.net/wwppp987/article/details/123470369
js对前端上传的图片转换为blob和base64(不带上传,单独前端可跑)
<view class="cu-bar bg-white margin-top">
<view class="action">
图片说明
</view>
<view class="action">
{{imgList.length}}/1
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
data() {
return {
form:{
imgList: [],
}
},
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
console.log(res.tempFiles);
let aaa = this.$tools.blobToDataURI(res.tempFiles[0],function(result){
console.log(result);
})
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '删除图片',
content: '确定要删除此图片?',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
其中:
// blob流转换为base64
export function blobToDataURI(blob, callback) {
console.log(blob);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
callback(e.target.result);
}
}
// base64转换为blob流
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
效果图:
更多推荐
已为社区贡献16条内容
所有评论(0)