项目场景:
提示: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, ".......");
},