uniapp上传图片

前台图片是blob格式，后台python处理，返回给前台图片路径，前台存储到数据库，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">发布</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, //判断是否添加商品的状态
sishows: true, //判断是否添加商品的状态
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, '缓存数据')
that.userId = e.data.userId
that.nickname = e.data.randname
}
})
},
mounted: function() {
var vm = this;
// 用 $on事件来接收参数 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('看我出现了几次')
        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: '发布成功'
                    });
                },

                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('清空数据');
    },

        chooseImage: async function(e) {
            var that = this
            if (this.imageList.length === 9) {
                let isContinue = await this.isFullImg();
                console.log("是否继续?", 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张图片了,是否清空现有图片？",
                    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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,591评论 6赞 501
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,448评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,823评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,204评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,228评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,190评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,078评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,923评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,334评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,550评论 2赞 333
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,727评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,428评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,022评论 3赞 326
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,672评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,826评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,734评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,619评论 2赞 354

uniapp上传图片

推荐阅读更多精彩内容