Tout d'abord, expliquez pourquoi vous souhaitez faire cela, principalement en raison des besoins de l'entreprise, par exemple :
Quand uniapp transfère vers un petit programme, vous devriez toujours rencontrer un problème qui est la sous-traitance. C'est une règle rigide du petit programme. Comme la sous-traitance implique plus de choses, parce qu'il faut tenir compte de la taille du paquet, le petit programme est stipulé que il ne doit pas dépasser 2 Mo. , le package principal n'est pas autorisé à référencer des ressources de sous-package. . .
À ce stade, nous ferons de notre mieux pour réduire certaines ressources inutiles dans le package principal, telles que le serveur de téléchargement d'images pour référence.
étape 1:
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'>上传</text>
</view>
<script>
ChooseImage() {
const _this = this
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
const tempFilePaths = res.tempFilePaths;
const uploadTask = uni.uploadFile({// 这里是重点
url: '后端提供服务器的接口地址',
filePath: tempFilePaths[0],//选择图片的path
name: 'file', //图片的名字
data: {}, //需要传递的参数
header: {AccessToken: "登录后端返回的Token,这里记住参数的数据类型"},
success: (uploadFileRes) => {//如果code等于200说明ok了
_this.imgList = [..._this.imgList, uploadFileRes.data]
}
});
}
});
},
</script>
Sortez les images qui doivent être téléchargées sur le serveur
Étape 2:
image de devis
Nous montons d'abord la méthode globale dans le fichier main.js
Vue.prototype.imageURL = function(img){// 这里的img是形参
return 'https://www.baidu.com后端的图片接口地址'+img
}
Ensuite, nous devons nous référer à l'image où
<image :src="imageURL('传递后端的图片名')"></image>
De cette façon, nous pouvons référencer l'image sur le serveur