全栈的自我修养 ———— 微信小程序实现上传并保存图片

本文主要是介绍全栈的自我修养 ———— 微信小程序实现上传并保存图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上传文件

1、使用原生上传

uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;uni.uploadFile({url: '......',filePath: tempFilePaths[0],
// name是服务端的属性名name: 'file',
// 可添加请求头:header: { "Content-Type": "multipart/form-data" },success: (uploadFileRes) => {console.log(uploadFileRes.data);}});}
});

2、使用其他ui上传

这里举例u-view

          <u-upload name="filePath" accept="image" :multiple="false" :maxCount="1" @afterRead="afterRead"><view slot="default"><view class="function">从相册选择</view></view></u-upload>

    async afterRead(event) {wx.uploadFile({url: '......',header: { "Content-Type": "multipart/form-data" },filePath: event.file.url,name: event.name,success: async (res) => {// 成功后的操作},fail: function (res) {uni.showToast({icon: "error",title: '服务响应失败'});}})},

保存文件

    async saveAvatar() {uni.downloadFile({url: '......',success: (res) => {if (res.statusCode === 200) {uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function () {uni.showToast({title: "保存成功"});},fail: function () {uni.showToast({title: "保存失败",icon: "none"});}});}}})},

这篇关于全栈的自我修养 ———— 微信小程序实现上传并保存图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---