uniapp上傳圖片

前臺圖片是blob格式月培，后臺python處理，返回給前臺圖片路徑蒿往，前臺存儲到數(shù)據(jù)庫，js和css有的是其他的功能湿弦，就沒刪熄浓，哈哈
<template>
<view class="page">
<form action="" @submit="formSubmit" @reset="formReset" enctype="multipart/form-data" method="">
<view class="wapper_header">
<button class="cancel" type="default" form-type="reset">取消</button>
<button class="release" form-type="submit">發(fā)布</button>
</view>
<view class="uni-form-item uni-column">
<input class="uni-input" name="title" style="border-bottom: 1px solid #DDDDDD;height: 80rpx;" placeholder="填寫標題會有更多贊哦~" />
</view>
<view class="uni-textarea"><textarea name="detail" placeholder="這一刻的想法..." v-model="input_content" /></view>
<view class="uni-list list-pd">
<view class="uni-list-cell cell-pd">
<view class="uni-uploader">
<view class="uni-uploader-head">
<view class="uni-uploader-title"></view>
<view class="uni-uploader-info">{{ imageList.length }}/9</view>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image, index) in imageList" :key="index">
<view class="uni-uploader__file" style="position: relative;">
<image class="uni-uploader__img" mode="aspectFill" :src="image" :data-src="image" @tap="previewImage"></image>
<view class="close-view" @click="close(index)">×</view>
</view>
</block>
<view class="uni-uploader__input-box" v-show="imageList.length < 9">
<view class="uni-uploader__input" @tap="chooseImage" name="file" data-src="imageList"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</form>
</view>
</template>
<script>
// import image from '@/common/image.js';
// import { pathToBase64, base64ToPath } from '../../components/js_sdk/gsq-image-tools/image-tools/index.js';
import Bus from '../../common/bus.js';
import Config from '@/src/config/index.js';
var sourceType = [['camera'], ['album'], ['camera', 'album']];
var sizeType = [['compressed'], ['original'], ['compressed', 'original']];
function getTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
month.length < 2 ? '0' + month : month;
day.length < 2 ? '0' + day : day;
return year + '-' + month + '-' + day;
}
export default {
data() {
return {
input_content: '',
imageList: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相冊', '拍照或相冊'],
sizeTypeIndex: 2,
sizeType: ['壓縮', '原圖', '壓縮或原圖'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
bblists: '',
//側滑返回start
// startX: 0, //點擊屏幕起始位置
// movedX: 0, //橫向移動的距離
// endX: 0, //接觸屏幕后移開時的位置
goodsname: '', //子組件選擇的商品
sishow: false, //判斷是否添加商品的狀態(tài)
sishows: true, //判斷是否添加商品的狀態(tài)
imagePath: [],
userId:'' ,//用戶id
nickname:'' ,//用戶名
issubmit:false
};
},
onUnload() {
(this.imageList = []),
(this.sourceTypeIndex = 2),
(this.sourceType = ['拍照', '相冊', '拍照或相冊']),
(this.sizeTypeIndex = 2),
(this.sizeType = ['壓縮', '原圖', '壓縮或原圖']),
(this.countIndex = 8);
},
created() {
var that = this
uni.getStorage({
key: 'userInfo',
success(e) {
console.log(e.data, '緩存數(shù)據(jù)')
that.userId = e.data.userId
that.nickname = e.data.randname
}
})
},
mounted: function() {
var vm = this;
// 用 $on事件來接收參數(shù) Bus.$ on('val', data => {
vm.goodsname = data;
if (data == '') {
vm.sishow = false;
vm.sishows = true;
} else {
vm.sishows = false;
vm.sishow = true;
}
});
},
methods: {
//刪除商品
deleterr: function(){
this.goodsname = {}
this.sishow = false
},
//添加商品
tj_sp: function() {
uni.navigateTo({
url: './commodityaddition'
});
},

    formSubmit: function(e) {
        var that = this
        if(that.issubmit==false){
            that.issubmit=true;
        }else{
            return false;
            }
        console.log('看我出現(xiàn)了幾次')
        var bblist = ''
        var brand_image = this.imageList[0];
        var post_img = this.imageList;
        var title = e.detail.value.title;
        var content = e.detail.value.detail;
        var userid = that.userId;
        var nickname = that.nickname;
        var goods_id = this.goodsname.id;
        if (goods_id == undefined) {
            goods_id = -1;
        }
        if (title == '') {
            uni.showModal({
                content: '標題不能為空',
                showCancel: false
            });
            return false;
        } else if (content == '') {
            uni.showModal({
                content: '內容不能為空',
                showCancel: false
            });
            return false;
        } else if (this.imageList == '') {
            uni.showModal({
                content: '圖片上傳中',
                showCancel: false
            });
            return false;
        } else {
            var top_time = getTime();
            uni.request({
                url: Config.baseUrl + '/v1/allsocialcon/invitation',
                method: 'POST',
                data: {
                    nickname: nickname,
                    userid: userid,
                    title: title,
                    content: content,
                    brand_image: brand_image,
                    post_img: post_img,
                    goods_id: goods_id
                    
                },
                header: { 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' },
                success: function(res) {
                    that.viopsfalse = true
                    uni.showLoading({
                        title: '發(fā)布成功'
                    });
                },

                fail: function(res) {
                    uni.showToast({
                        title: '上傳圖片過大，上傳失敗'
                    });
                }
            });
            setTimeout(function() {
                uni.hideLoading();

                uni.switchTab({
                    url: './../findings/findings',
                    success: function(e) {
                        var page = getCurrentPages()[0];
                        if (page == undefined || page == null) return;
                        page.onLoad();
                    }
                });
            }, 1000);
        }

        var userInfo=uni.getStorageSync('userInfo');
        that.userId = userInfo.userId
        that.nickname = userInfo.randname
    },
    formReset: function(e) {
        this.imageList = [];
        this.imagePath = [];
        console.log('清空數(shù)據(jù)');
    },

        chooseImage: async function(e) {
            var that = this
            if (this.imageList.length === 9) {
                let isContinue = await this.isFullImg();
                console.log("是否繼續(xù)?", isContinue);
                if (!isContinue) {
                    return;
                }
            }
            await uni.chooseImage({
                count:9-this.imageList.length,
                success: (chooseImageRes) => {
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    console.log(tempFilePaths[0], '我是上傳的圖片')
                    for(let i=0;i<tempFilePaths.length;i++){
                        uni.uploadFile({
                            url: Config.baseUrl +'/v1/goods/upload',
                            filePath: tempFilePaths[i],
                            name: 'file',
                            formData: {
                                'user': 'test'
                            },
                            success: (uploadFileRes) => {console.log(uploadFileRes.data)
                                that.imageList.push(uploadFileRes.data)
                            }
                        });
                        if(i==tempFilePaths.length-1){
                        }
                    }
                    
                }
            });
        },
        
        isFullImg: function() {
            return new Promise((res) => {
                uni.showModal({
                    content: "已經有9張圖片了,是否清空現(xiàn)有圖片省撑？",
                    success: (e) => {
                        if (e.confirm) {
                            this.imageList = [];
                            res(true);
                        } else {
                            res(false)
                        }
                    },
                    fail: () => {
                        res(false)
                    }
                })
            })
        },
        
        previewImage: function(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList
            })
        },
        close(e){
            this.imageList.splice(e,1);
        },
}

};
</script>

.cell-pd {
padding: 20upx 30upx;
}

.uni-textarea {
width: auto;
padding: 20upx 25upx;
line-height: 1.6;
height: 150upx;
}
.uni-list::before {
height: 0;
}
.uni-list:after {
height: 0;
}
.list-pd {
margin-top: 0;
}
.close-view {
text-align: center;
line-height: 30upx;
height: 35upx;
width: 35upx;
background: #ef5350;
color: #ffffff;
position: absolute;
top: 1upx;
right: 1upx;
font-size: 35upx;
border-radius: 8upx;
}
.page {
width: 750upx;
height: 100%;
}
.cancel {
background-color: #fff;
color: #333;
width: 112upx;
height: 50upx;
line-height: 50upx;
float: left;
font-size: 28upx;
padding: 0;
text-align: center;
}

.release {
background-color: #000;
color: #fff;
width: 112upx;
height: 50upx;
line-height: 50upx;
float: right;
font-size: 28upx;
padding: 0;
text-align: center;
}
.wapper_header {
padding: 20rpx 20rpx 0 20rpx;
}
.img_box {
display: flex;
align-items: center;
justify-content: center;
width: 210rpx;
height: 158rpx;
float: left;
margin: 0 20rpx;
}
.img_box image {
width: 210rpx;
height: 158rpx;
}

.box {
width: 100%;
overflow: hidden;
margin-bottom: 20rpx;
padding: 20px 0;
}

.right_boxv {
width: 66%;
overflow: hidden;
float: left;
}

.one_box {
/* display: flex; /
width: 100%;
float: left;
/ align-items: center; /
/ justify-content: space-between; */
}

.two_box {
/* display: flex; /
width: 100%;
float: left;
text-align: right;
/ align-items: center; /
/ justify-content: space-between; */
}

.publish_name {
color: #333333;
font-size: 32rpx;
overflow: hidden;
}

.goods_pice {
font-size: 32rpx;
font-weight: 600;
color: #dc3545;
padding-right: 10px;
}

.three_box {
display: flex;
flex-direction: row-reverse;
}

.three_list {
padding: 0rpx 20rpx;
background: #000000;
color: #fff;
line-height: 44rpx;
margin-left: 22rpx;
}

.y_p {
background: #fff;
color: #000000;
line-height: 46rpx;
}

.bor {
background: #fff;
border: 2rpx solid #000000;
color: #000000;
}

.tj_goods {
width: 94%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.tj_sp {
background: #000000;
padding: 0 26rpx;
color: #ffffff;
border-radius: 10rpx;
}
.hmy {
width: 100%;
text-align: center;
}
.deleterr{
text-align: right;
float: right;
margin-right: 20rpx;
padding: 2rpx 20rpx;
background: #000000;
color: #fff;
font-size: 12px;
border-radius: 10rpx;
}
</style>

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末赌蔑，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子竟秫，更是在濱河造成了極大的恐慌娃惯，老刑警劉巖，帶你破解...
沈念sama閱讀 218,858評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件肥败，死亡現(xiàn)場離奇詭異趾浅，居然都是意外死亡，警方通過查閱死者的電腦和手機馒稍，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,372評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門皿哨，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人纽谒，你說我怎么就攤上這事证膨。” “怎么了鼓黔？”我有些...
開封第一講書人閱讀 165,282評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵央勒，是天一觀的道長。經常有香客問我澳化，道長崔步，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,842評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任缎谷，我火速辦了婚禮井濒，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己瑞你，他們只是感情好酪惭，可當我...
茶點故事閱讀 67,857評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著捏悬，像睡著了一般撞蚕。火紅的嫁衣襯著肌膚如雪润梯。梳的紋絲不亂的頭發(fā)上过牙，一...
開封第一講書人閱讀 51,679評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音纺铭，去河邊找鬼寇钉。笑死，一個胖子當著我的面吹牛舶赔，可吹牛的內容都是我干的扫倡。我是一名探鬼主播，決...
沈念sama閱讀 40,406評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼竟纳，長吁一口氣：“原來是場噩夢啊……” “哼撵溃！你這毒婦竟也來了？” 一聲冷哼從身側響起锥累，我...
開封第一講書人閱讀 39,311評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤缘挑，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后桶略，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體语淘，經...
沈念sama閱讀 45,767評論 1贊 315
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,945評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年际歼，在試婚紗的時候發(fā)現(xiàn)自己被綠了惶翻。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 40,090評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡鹅心，死狀恐怖吕粗，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情旭愧，我是刑警寧澤溯泣，帶...
沈念sama閱讀 35,785評論 5贊 346
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站榕茧，受9級特大地震影響垃沦，放射性物質發(fā)生泄漏。R本人自食惡果不足惜用押，卻給世界環(huán)境...
茶點故事閱讀 41,420評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一肢簿、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦池充、人聲如沸桩引。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,988評論 0贊 22
一樁弒父案收夸，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽坑匠。三九已至，卻和暖如春卧惜，著一層夾襖步出監(jiān)牢的瞬間厘灼，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,101評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工咽瓷，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留设凹，地道東北人。一個月前我還...
沈念sama閱讀 48,298評論 3贊 372
代替公主和親
正文我出身青樓茅姜，卻偏偏與公主長得像闪朱，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子钻洒，可洞房花燭夜當晚...
茶點故事閱讀 45,033評論 2贊 355

uniapp上傳圖片

推薦閱讀更多精彩內容