uniapp は u-upload コンポーネントを使用して画像をアップロードします
序文
画像アップロード機能は、uniapp が開発した WeChat アプレットで使用され、uniapp の画像アップロード コンポーネントが使用されます
注: ここでのバックエンド インターフェイスの受信タイプは form-data で、パラメーター名は files です
1.公式の使用例
<template>
<view>
<u-upload ref="uUpload" :action="action" :auto-upload="true" ></u-upload>
<u-button @click="submit">提交</u-button>
</view>
</template>
<script>
export default {
data() {
return {
action: 'http://www.example.com/upload',
filesArr: []
}
},
methods: {
submit() {
let files = [];
// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
files = this.$refs.uUpload.lists.filter(val => {
return val.progress == 100;
})
// 如果您不需要进行太多的处理，直接如下即可
// files = this.$refs.uUpload.lists;
console.log(files)
}
}
}
</script>
分析する
まず、<u-upload ref="uUpload" :action="action" :auto-upload="true" > ここで:auto-upload="true"、ここではファイルを選択した後の自動アップロードを設定します。アップロード パスはデータで定義されたアクションですが、ここで自動アップロードを使用する場合は、アップロードされた URL アドレスのみを設定できます。ビジネスで他のニーズがある場合、たとえばトークンをリクエスト ヘッダーに含める必要がある場合は、それでは満足できないため、
自動アップロードをオフにすることを選択し:auto-upload="false"
、選択が完了した後にコールバック関数をバインドする 、コールバック関数で手動アップロードを使用@on-choose-complete="onChooseComplete"
2.自動アップロードをオフにし、手動アップロード方法を使用し、コードを使用します
htmlコード
<template>
<u-form :model="deviceInfo" ref="uForm">
<view class="top">
<u-form-item prop="imgUrl" label-width="10" :border-bottom='false'>
<u-upload @on-choose-complete="onChooseComplete" ref="uUpload" :custom-btn="true"
:show-upload-list="true" :auto-upload="false" :file-list="fileList" :show-progress="true"
:deletable="true" max-count="1" class="test2">
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
<image src="../static/img/addDevice.jpg" mode="aspectFill"></image>
</view>
</u-upload>
</u-form-item>
</view>
</u-form>
</template>
jsコード
<script>
// 这里引入的 Config 中配置了整个项目的接口地址
import Config from '@/core/config'
// 这里引入 store 是为了获取 token
import store from '@/store/index.js';
// 后端api地址
const uploadUrl = Config.get('apiUrl') + 'admin-api/infra/file/upload';
export default {
data() {
return {
// 预置上传列表
fileList: [],
deviceInfo: {
photoUrl: '',
}
}
},
methods: {
onChooseComplete(lists, name) {
const app = this;
uni.uploadFile({
// 这里是你上传图片的地址
// url: 'https://xxx.xx.xx.xx/admin-api/infra/file/upload',
url: uploadUrl,
filePath: lists[0].url,
name: 'file',
header: {
"Authorization": `Bearer ${
store.getters.token}`
},
// 这个res是后端返回给你上传成功的数据里边一般会有上传之后图片的在线路径
success: (res) => {
app.deviceInfo.photoUrl = JSON.parse(res.data).data;
console.log(JSON.parse(res.data).data)
},
})
},
}
}
</script>
CSSコード
<style lang="scss" scoped>
.top {
width: 224rpx;
height: 224rpx;
margin: 0 auto;
margin-bottom: 50rpx;
margin-top: 50rpx;
image {
width: 224rpx;
height: 224rpx;
border-radius: 50%;
}
.tips {
font-size: 28rpx;
color: $u-type-primary;
}
}
</style>
現在達成している効果
分析した
現在のプロジェクトで提供されているアップロードされた写真はトークンを運ぶ必要があるため
、ファイルをアップロードするには uni.uploadFile が使用されます. ここで、パラメーター url はアプリ側で完全に記述される必要があります (http / https を運ぶ). uni.uploadFile はできません
.統合されたリクエスト インターセプターによってインターセプトされます。リクエスト ヘッダーを運ぶ必要がある場合は、uni.uploadFile で自分で設定する必要があります。
例: 上記は、今日お話しする内容です. この記事では、pandas の使用法を簡単に紹介するだけであり、pandas は、データを迅速かつ便利に処理できるようにする多数の関数とメソッドを提供します.