プレゼンテーション効果:
1.1 単一画像のアップロード
1.2 複数の写真のアップロード
はしがき: 小さなプログラムを書くときに、多くの人が uView フレームワークを使用すると思います。全体的な感触は非常に問題ありません。これだけは言えます。間違いなく写真に遭遇します。このアップロード コンポーネントを使用すると、さまざまな問題が発生すると思います。これは、単一画像と複数画像のアップロード方法についての私個人のまとめです。
uView2.X フレームワーク:uView 2.0 - nvue の uni-app エコロジカル フレームワーク - uni-app UI フレームワークと完全に互換性があります
単一画像のアップロード:
ページ構造:
<u-form-item prop="image1" ref="item">
<view class="img">
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
uploadIcon="plus" uploadIconColor="#0086ff" ref="upload" width="110" height="110">
</u-upload>
<image v-if="!fileList1[0].url" src="../../../static/images/photo.png" mode=""></image>
</view>
<view class="text">(*请提供真实头像)</view>
</u-form-item>
1. 最初に定義したリストは変更せず、公式のリストに従ってください。
fileList1: [],
name="1" 标识符,
2. アップロードと削除にはいくつかの方法があります。
2.1削除方法
// 图像删除方法
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
2.2 形式制限やサイズ制限など、アップロードする前にやっておくべきこと こちらの方が面倒なのでコメント欄に詳しく書いてあります。
// 新增图片 这个是上传图像的方法
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
// 用于存储符合条件的图片
let Images = [];
// 遍历上传的每张图片
for (let i = 0; i < lists.length; i++) {
const item = lists[i];
// 验证图片格式
const isImage = /\.(png|jpe?g)$/i.test(item.url);
if (!isImage) {
uni.showToast({
title: '只能上传png,jpg,jpeg格式的图片',
icon: 'none',
duration: 3000
});
// 删除不符合条件的图片
lists.splice(i, 1);
// 跳过当前图片,进行下一张图片的验证
continue;
}
// 验证图片大小
const maxSize = 2 * 1024 * 1024; // 2MB大小限制
if (item.size > maxSize) {
uni.showToast({
title: '图片大小不能超过2MB',
icon: 'none',
duration: 3000
});
// 删除不符合条件的图片
lists.splice(i, 1);
// 跳过当前图片,进行下一张图片的验证
continue;
}
Images.push(item)
}
let fileListLen = this[`fileList${event.name}`].length
Images.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < Images.length; i++) {
const result = await this.uploadFilePromise(Images[i].url)
// 返回给后端服务器的 结果需要赋值给 this.infoForm.image = result
console.log(result, '上传图像result');
// this.infoForm.avatar = result
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: result.status,
message: result.status == 'failed' ? '上传失败' : '',
url: result.url
}))
fileListLen++
}
},
2.2.1 アップロードする前に形式とサイズの制限を設け、準拠していない場合は直接削除してください。
2.3 アップロードが成功した場合のコールバックは主に、アップロードが JSON 形式であり、JSON.parse(res.data).path で処理する必要があるためです。
また、ここでステータス判定が行われ、成功、失敗の判定があり、主にアップロードに失敗した場合にフォークすることができます。
ここでステータスを適切に処理します
気持ち悪いときは処理せずに「アップロード中」と表示され続ける。
// 回调函数方法
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: baseUrl + '/admin/upload/targetFile', //后端接口地址
filePath: url,
name: 'file', //传给后端参数
header: {
'token': uni.getStorageSync('whjk_token')
},
formData: {
path: 'avatar/user'
},
success: (res) => {
console.log(res, 'uploadFilePromise');
// resolve(JSON.parse(res.data).path)
if (res.statusCode == 200) {
resolve({
url: JSON.parse(res.data).path,
status: 'success'
})
} else {
resolve({
url: url,
status: 'failed'
})
}
}
});
})
},
2.3 パラメータを渡す手順 パラメータは正しい必要があります
uni.uploadFile({
url: baseUrl + '/admin/upload/targetFile', // 后端接口地址
filePath: url,
name: 'file', //传给后端参数
header: {
'token': uni.getStorageSync('whjk_token')
},
formData: {
path: 'avatar/user' // 后端给的路径 看情况而定
},
複数の画像のアップロードまたはビデオのアップロード:
fileList2: [], // 不要随意定义
name = "2"
実はアップロード方法は同じで、属性を変えるだけで判定方法も同じです。
1. この属性を変更する必要があります
accept="image/*,video/*,.pdf"
2. ページ構成
<u-form-item prop="annexPhoto" ref="item1">
<view class="common">
<text class="tex">展示附件</text>
<text class="ext">(最多6个,仅支持png,jpg,jpeg格式上传)</text>
</view>
<view class="upload">
<u-upload :fileList="fileList2" @afterRead="imageOrVideoOrPdf" @delete="deletePicPdf" name="2" multiple
accept="image/*,video/*,.pdf"
:maxCount="6" uploadIcon="plus" uploadIconColor="#0086ff" :deletable="true">
</u-upload>
</view>
</u-form-item>
3. アップロードする前に画像のサイズと形式を制限してください。内部のコメントは非常に詳細です。
// 视频image和pdf方法
async imageOrVideoOrPdf(event) {
console.log(event);
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file);
// 用于存储符合条件的图片
let validImages = [];
// 遍历上传的每张图片
for (let i = 0; i < lists.length; i++) {
const item = lists[i];
// 验证图片格式
const isImage = /\.(png|jpe?g)$/i.test(item.url);
if (!isImage) {
uni.showToast({
title: '只能上传png,jpg,jpeg格式的图片!',
icon: 'none',
duration: 5000
});
// 删除不符合条件的图片
lists.splice(i, 1);
// 跳过当前图片,进行下一张图片的验证
continue;
}
// 验证图片大小
const maxSize = 2 * 1024 * 1024; // 2MB大小限制
if (item.size > maxSize) {
uni.showToast({
title: '图片大小不能超过2MB!',
icon: 'none',
duration: 5000
});
// 删除不符合条件的图片
lists.splice(i, 1);
// 跳过当前图片,进行下一张图片的验证
continue;
}
// 符合条件的图片添加到validImages数组中
validImages.push(item);
}
let fileListLen = this[`fileList${event.name}`].length;
validImages.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < validImages.length; i++) {
const result = await this.uploadFileOrPdf(validImages[i].url);
console.log(result);
// 返回给后端服务器的结果需要赋值给 this.infoForm.annex = result
let item = this[`fileList${event.name}`][fileListLen];
// console.log(fileListLen);
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: result.status,
message: result.status == 'failed' ? '上传失败' : '',
url: result
}));
console.log(result, 'result');
if (result.status == 'success') {
this.imgarr.push(result);
console.log(this.imgarr,'imgarr');
}
fileListLen++;
}
// 将上传成功的url数组一起提交给后端
// this.infoForm.annex = urls
},
4. アップロード成功のコールバック コメント領域に注意事項があります。PDF ビデオと写真をアップロードできます。パスを変更するだけです。
// 视频image和pdf方法回调函数
uploadFileOrPdf(url) {
// let uploadedFilePaths = [];
return new Promise((resolve, reject) => {
// let path;
// const fileExtension = url.split('.').pop().toLowerCase();
// if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
// path = 'annex/image'; // 图片路径
// } else if (fileExtension === 'pdf') {
// path = 'annex/pdf'; // PDF路径
// } else {
// reject('Invalid file type');
// return;
// }
uni.uploadFile({
url: baseUrl + '/admin/upload/targetFile', //后端接口地址
filePath: url,
name: 'file', //传给后端参数
header: {
'token': uni.getStorageSync('whjk_token')
},
formData: {
path: 'annex/image' // 根据文件后缀类型设置路径
},
success: (res) => {
console.log(res);
// resolve(JSON.parse(res.data).path)
if (res.statusCode == 200) {
resolve({
url: JSON.parse(res.data).path,
status: 'success'
})
} else {
resolve({
url: url,
status: 'failed'
})
}
},
fail: (err) => {
// console.log(err,'err');
reject(err);
}
});
})
},
5.削除方法
// 图像删除方法
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
6.最終的な効果はこんな感じです