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

上传文件

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);
			}
		});
	}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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>
1
2
3
4
5
6
7

    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: '服务响应失败'
          });
        }
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

保存文件

    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"
                });
              }
            });
          }
        }
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23