這篇文章主要介紹“uniapp怎么上傳二進制圖片”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“uniapp怎么上傳二進制圖片”文章能幫助大家解決問題。
前端選擇本地文件，將選擇好的文件顯示在界面上進行預覽，可同時選擇四張進行預覽。
前端選擇本地的png、jpg、等格式的圖片，將圖片以二進制的形式傳到后端服務器，后端對二進制圖片進行處理，返回給前端一個服務器鏈接在線圖片，在瀏覽器就可以打開鏈接訪問的那種。然后前端將這個圖片鏈接渲染在頁面進行預覽。
首先
我們看一下uniapp的官方文檔：https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是這樣的
先寫一個模擬的demo
1：首先我是是用了colorUI的框架，在項目里面引入
在page底下的vue文件引入
@import "../../colorui/main.css"; @import "../../colorui/icon.css";
這樣一來，就不需要寫什么樣式了，直接使用寫好的就行了。
<template>
<view>
<form>
<view class="cu-bar bg-white margin-top">
<view class="action">
圖片上傳
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
imgList: [],
// modalName: null,
};
},
methods: {
ChooseImage() {
uni.chooseImage({
count: 4, //默認9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album'], //從相冊選擇
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
//刪除
DelImg(e) {
uni.showModal({
title: '刪除',
content: '確定要刪除這張圖片？',
cancelText: '取消',
confirmText: '刪除',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
}
}
</script>
<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>效果是這樣的
每次選完圖片之后顯示在頁面上，我這里設置了最多可以選擇四張，圖片鏈接使用了臨時的blob，接下來就要使用后端小伙伴給的接口，將自己本地的二進制文件傳給他了。
在chooseImage選擇好圖片之后，寫一個成功的回調函數，在回到函數里面添加一個圖片上傳的方法uploadFile，在方法里面添加url，等參數。
success: (res) => {
const tempFilePaths = res.tempFilePaths;
const uploadTask = uni.uploadFile({
url: 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
filePath: tempFilePaths[0],
name: 'file',
success: function(uploadFileRes) {
console.log(uploadFileRes);
_this.imgList = [..._this.imgList, uploadFileRes.data]
}
});
}若是請求成功
則返回一個圖片鏈接
添加接口之后 的，demo如下：
<template>
<view>
<form>
<view class="cu-bar bg-white margin-top">
<view class="action">
圖片上傳
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="item">
<image v-if="item" :src="item" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
</form>
</view>
</template>
<script>
export default {
data() {
return {
imgList: [],
// modalName: null,
};
},
methods: {
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 : 'http://47.xxx.xxx.78:8088/chemApp/work/upload.action',
filePath: tempFilePaths[0],
name: 'file',
success: function (uploadFileRes) {
console.log(uploadFileRes);
_this.imgList = [..._this.imgList, uploadFileRes.data]
}
});
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
//刪除
DelImg(e) {
uni.showModal({
title: '刪除',
content: '確定要刪除這張圖片？',
cancelText: '取消',
confirmText: '刪除',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
}
}
</script>
<style>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.cu-form-group .title {
min-width: calc(4em + 15px);
}
</style>
上傳圖片效果
關于“uniapp怎么上傳二進制圖片”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
