vue-pc アップロードの最適化
-
独自のドキュメント サーバーを使用して写真をアップロードする場合、ローカルでは問題ありませんが、オンラインでアップロードすると時間がかかります。
-
現時点での最も簡単な方法は、読み込みコンポーネントを作成し、アップロードする前にコンポーネントを開いて、インターフェースをドロップした後にコンポーネントを閉じることです。
-
または、書きたくない場合は、要素読み込みを直接使用して読み込むマスクレイヤーを書き込み、インターフェイスを調整するときに開閉を制御します
1. コンポーネントメソッドを自分で書く
2. element-loading を使用してコンポーネントマスクレイヤーをロードします
//开启遮罩层
let loadingInstance = Loading.service({
lock: true, //lock的修改符--默认是false
text: "正在上传背景图，请耐心等待", //显示在加载图标下方的加载文案
spinner: "el-icon-loading", //自定义加载图标类名
background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
});
// 上传文档服务器-调用接口
// 接口调用成功-赋值信息
//关闭遮罩层
loadingInstance.close();uni-app-upload の最適化
-
uni-appのuni-file-picker-uploadを利用すると、自社で構築したドキュメントサーバーと連携する場合があります（無料）
-
ただし、uni-app のアップロード領域を使用しない場合、アップロード失敗フックが実行されないため、操作が困難になります。
-
特にリリース後は、アップロードに失敗し（応答に時間がかかる）、アプレットが uni-file-picker-component への一時パスを読み込んで表示する場合があります。現時点では、API は正常に呼び出されていません (Apple 実機のほうがわかりやすいです)
-
このため、誤操作によるデータの不正確を避けるために、アップロード中であることをユーザーに伝え、操作しないようにマスク レイヤーを追加することしかできません。
async select(e) {
// 获取到文件对象时，开启加载遮罩层
// 开启遮罩层-开始上传-响应需要时间-提示用户等待-防止用户误操作
this.$modal.loading("上传图片中...")
console.log('选择文件：', e)
const tempFilePaths = e.tempFilePaths[0];
uni.uploadFile({
url: 'https://api.thgykj.com/admin-api/upload/file',
filePath: tempFilePaths,
name: 'multipartFile',
header: {
"Authorization":getAccessToken(),
},
success: (res) => {
console.log('上传成功', res.data);
console.log('上传数据转换', JSON.parse(res.data));
// 取到文档服务器的值
let uploaddata = JSON.parse(res.data)
if (uploaddata) {
// 有值-上传成功-加载需要时间-赋值完数据-提示用户-关闭遮罩层
toast('巡检图片添加成功')
this.$modal.closeLoading()
} else {
//没值-上传失败超时-提示用户-关闭遮罩层
this.$modal.closeLoading()
toast('巡检图片添加失败，请重新添加')
}
},
fail: error => {
console.log(error);
}
})
},要約:
このプロセスを経て、vue-pc アップロードの最適化、uni-app のアップロードの最適化についても事前に深い印象を持ったと思いますが、実際の開発で遭遇する状況は明らかに異なるため、その意味を理解する必要があります原理は同じです。さあ、労働者を殴ってください！
不備があればご指摘ください、ありがとうございます -- Fengguowuhen