本文详细介绍在uniapp中上传本地图片的两种常用方式。首先通过uni.chooseImage获取本地资源路径，再利用uni.uploadFile发起POST请求上传文件。其次讲解如何将Base64转换为二进制流（Blob）进行上传，适用于特定格式数据提交场景。
1、上传本地图片
1.1 uni.chooseImage
uni.chooseImage(OBJECT)调用该接口可从本地相册选取图片，或者直接使用设备相机进行拍摄。
1.2 uni.uploadFile
uni.uploadFile(OBJECT)该接口用于将本地资源上传至开发者服务器。客户端会发起一个
POST请求，其中content-type设置为multipart/form-data。 当页面通过 uni.chooseImage 等接口获取到本地资源的临时文件路径后，即可使用此接口将本地资源上传至指定的服务器地址。
代码：
export default {
methods: {
/**
* 从本地相册选择图片
*/
handleChooseImage() {
uni.chooseImage({
count: 3,
sourceType: ['album'],
success: res => {
let filePath = res.tempFilePaths[0];
// 上传图片
this.handleUploadFile('/upload', filePath);
}
});
},
/**
* 上传
* @param {String} url 接口地址
* @param {String} filePath 要上传文件资源的路径
* @param {Object} data 接口的一些参数
*/
handleUploadFile(url, filePath, data) {
uni.uploadFile({
url: url,
filePath,
header: {
"authorization": uni.getStorageSync('token')
},
formData: data,
success: (uploadFileRes) => {
console.log(uploadFileRes, '上传成功')
},
fail: (res) => {
console.log(res, '上传失败')
}
})
}
}
}2、以二进制流的方式上传
export default {
methods: {
handleUpload() {
// 获取二进制流（暂时用base64转二进制流测试）
let dataurl =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = this.dataURLtoBlob(dataurl);
this.handleUploadFile('upload', blob)
},
/**
* Base64字符串转二进制流
* @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
*/
dataURLtoBlob(dataurl) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime,
});
},
/**
* 上传
* @param {String} url 接口地址
* @param {Object} file 二进制流
* @param {Object} data 接口的一些其他的参数
*/
handleUploadFile(url, file, data) {
uni.uploadFile({
url: url,
file,
header: {
"authorization": uni.getStorageSync('token')
},
formData: data,
success: (uploadFileRes) => {
console.log(uploadFileRes, '上传成功')
},
fail: (res) => {
console.log(res, '上传失败')
}
})
}
}
}总结
以上就是关于uniapp中上传本地图片以及以二进制流方式上传的详细介绍。如需了解更多uniapp上传图片的相关内容，建议搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！