uniapp上传下载

项目场景:

 

提示:uniapp上传(图片和视频)

	<uni-forms-item label="附件" name="details">
								<u-upload :fileList="fileList" @afterRead="afterRead" name="upload-img" :maxCount="1" width="250" height="150" accept="all">
									<u-button type="primary">上传文件</u-button>
								</u-upload>
								<u-icon v-if="fkFormData.objectName" name="checkmark-circle" color="#52c41a" size="24" style="margin-left:60rpx; float: right"></u-icon>
								<view>
								</view>
							</uni-forms-item>
	// 新增图片
		afterRead(event) {
			const accessToken = uni.getStorageSync('x-access-token');
			const tokenType = uni.getStorageSync('tokenType');
			uni.uploadFile({
				header: {
					'jmis-auth': `${tokenType} ${accessToken}`,
					Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
					'X-Access-Token': accessToken,
					// 'Content-Type': 'multipart/form-data' // 请求体的编码格式
				},
				url: this.$baseUrl+'/jmis-minio/minio/uploadFile', // 后端接口文档上的接口地址
				filePath: event.file.url, // 图片的路径
				name: 'file',
				formData: {
					bucketName: 'my-message' // 后端上传接口参数,这个地方你后端的接口文档
				},
				// 上传成功回调
				success: (res)=>{
					if (res.statusCode == 200) {
						const data = JSON.parse(res.data);
						this.fkFormData.objectName=data.data
						this.fkFormData.bucketName = 'my-message'
						// 上传成功之后拿到 res ,然后进行你的下一步操作
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: '上传失败!'
						});
					}
				},
				// 上传失败回调
				fail:  (err)=> {
					this.$refs.uToast.show({
						type: 'error',
						icon: false,
						message: '上传失败!'
					});
				}
			});
		},
下载
  <u-tag
            type="primary"
            text="下载"
            @click="DownloadFile(dataList)"
          ></u-tag>
    DownloadFile(row) {
      if (!row.objectName || row.objectName == "") {
        uni.showToast({
            icon: "none",
            mask: true,
            title: "暂无附件",
          });
        return;
      }
      const accessToken = uni.getStorageSync("x-access-token");
      const tokenType = uni.getStorageSync("tokenType");
      uni.downloadFile({
        header: {
          "jmis-auth": `${tokenType} ${accessToken}`,
          Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0",
          "X-Access-Token": accessToken,
          // 'Content-Type': 'multipart/form-data' // 请求体的编码格式
        },
        url:
          this.$baseUrl +
          "/jmis-minio/minio/getObject?bucketName=my-message&objectName=" +
          row.objectName, //下载地址接口返回
        success: (data) => {
          console.log(data, "downloadFile");
          if (data.statusCode === 200) {
            //文件保存到本地
            uni.saveFile({
              tempFilePath: data.tempFilePath, //临时路径
              success: (res) => {
                console.log(res, "saveFile");
                uni.showToast({
                  icon: "none",
                  mask: true,
                  title: "文件已保存至:" + res.savedFilePath, //保存路径
                  duration: 3000,
                });
                setTimeout(() => {
                  //打开文档查看
                  uni.openDocument({
                    filePath: res.savedFilePath,
                    success: function (res) {
                      // console.log('打开文档成功');
                    },
                  });
                }, 3000);
              },
            });
          }
        },
        fail: (err) => {
          console.log(err);
          uni.showToast({
            icon: "none",
            mask: true,
            title: "失败请重新下载",
          });
        },
      });

    },

全文件上传选择非原生2.0版 插件上传文件

下载插件地址:全文件上传选择非原生2.0版 - DCloud 插件市场

 <uni-forms-item
                label="附件"
                name="details"
                style="margin-bottom: 15rpx"
              >
                <view class="upload">
                  <lsj-upload
                    width="80px"
                    ref="lsjUpload0"
                    childId="upload1"
                    :size="50"
                    :count="1"
                    :debug="false"
                    :instantly="true"
                    :option="option"
                    :multiple="false"
                    @uploadEnd="onuploadEnd"
                  >
                    <view class="btn">上传文件</view>
                  </lsj-upload>
                  <u-icon
                    v-if="fkFormData.objectName"
                    name="checkmark-circle"
                    color="#52c41a"
                    size="24"
                    style="margin-left: 60rpx; float: right"
                  ></u-icon>
                </view>
              </uni-forms-item>
              <uni-forms-item
                label=""
                name=""
                v-if="filesname"
                style="margin-bottom: 15rpx"
              >
                <view style="display: flex; align-items: center">
                  {{ filesname }}
                  <u-icon
                    name="close-circle"
                    color="#ccc"
                    @click="clearfilesname"
                    style="margin-left: 60rpx; float: right"
                  ></u-icon>
                </view>
              </uni-forms-item>
 data() {
    return {
      filesname: "",
      files: new Map(),
      show: false,
      option: {
        url: uni.getStorageSync("baseUrl") + "/jmis-minio/minio/uploadFile",
        // 上传附件的key
        name: "file",
        formData: {
          bucketName: "my-message",
        },
        header: {
          "jmis-auth": `${uni.getStorageSync("tokenType")} ${uni.getStorageSync(
            "x-access-token"
          )}`,
          Authorization: "Basic c2FiZXI6c2FiZXJfc2VjcmV0",
          "X-Access-Token": uni.getStorageSync("x-access-token"),
        },
      },
    
      },
    };
  },
 clearfilesname() {
      this.$refs["lsjUpload0"].clear();
      this.filesname = undefined;
      delete this.fkFormData.objectName;
      delete this.fkFormData.bucketName;
    },
    onuploadEnd(item) {
      let responseText = JSON.parse(item.responseText);
	  console.log(item.responseText,'?????');
      if (responseText.code == 200) {
        this.filesname = item.name;
        this.fkFormData.objectName = responseText.data;
        this.fkFormData.bucketName = "my-message";
      }
      console.log(item, ".......");
    },

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值