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>

uniapp上传图片

推荐阅读更多精彩内容