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

这篇具有很好参考价值的文章主要介绍了全栈的自我修养 ———— 微信小程序实现上传并保存图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

上传文件

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文章来源地址https://www.toymoban.com/news/detail-854447.html

          <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"
                });
              }
            });
          }
        }
      })
    },