tp5 uniapp 多图上传

<template>
    <view class="content">
        <view name= "img[]" class="" @click="get_img">点击上传</view>
        <view v-for="(item ,index) in tempFiles " :key="index" >
            <view class="upload_img_item"> <view class="upload_img_close">X</view>
            <image :src="item.path" class="upload_img"  @click="img_delete(index)"></image>
            </view>
        </view> 
        <view @click="do_upload">上传</view>
     
        
    </view>
</template>

<script> 
    export default {
        data() {
            return {
                tempFiles :[],
                uploadList:[],
                img_status:false, 
                imgAllUrl:[]
            }
        },
        onLoad() {
             
        },
        methods: {
            get_img(){
                const _self = this;
                uni.chooseImage({
                    count:1, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
                    sourceType: ['album'], //从相册选择
                    success: function (res) { 
                    
                       var tempFiles = res.tempFiles; //显示的图片
                       var tempFilePaths = res.tempFilePaths; //上传的图片
                        
                       //需要显示的图片
                        for(var i = 0;i<tempFiles.length;i++){ 
                            _self.tempFiles .push(tempFiles[i]);
                       } 
                       
                       //处理需要上传的图片
                       for(var i = 0;i<tempFilePaths.length;i++){
                            _self.uploadList.push(tempFilePaths[i]);
                       } 
                       
                       
                       // 文件路劲封装
                       let imgs = _self.uploadList.map((value, index) => {
                           return {
                                   name: "image" + index, 
                                   uri: value
                               }
                       });
                       
                       console.log(imgs);
                       
                       uni.uploadFile({
                           url:'http://www.yckcu.cn/api/Upload/uploadimages_file', 
                           files: imgs,
                              fileType: "image",  
                           formData:{folder:'repair'},
                           success: (res) => {
                               if (res.statusCode === 200) {
                                   uni.showToast({
                                       title: "反馈成功!"
                                   });
                               }
                           }
                         });
                       
                       
                       
                    }
                });
                 
            },
            img_delete(e){
                const self = this; 
                  self.imageList.splice(e,1);
                 self.uploadList.splice(e,1);
            },
    
            do_upload(){
                var userinfo = uni.getStorageSync('userinfo');
                 var user_id = userinfo.user_id;
                  var that = this;
                const img_list =this.uploadList; 
                var i=0;  
             for(i;i<img_list.length;i++){
                   const uploadTask =uni.uploadFile({
                     url:'http://www.yckcu.cn/api/Upload/uploadimages',
                     filePath: img_list[i],
                     fileType: 'image',
                     name: 'file', 
                     formData: {
                        user_id:user_id,'folder':'repair'
                     }, 
                     success: (res) => { 
                        var myurl = JSON.parse( res.data );
                        // console.log(myurl.data[0]); 
                     // that.imgAllUrl.push(myurl.data[0])
                     that.imgAllUrl.push(myurl.data[0])
                    
                     }
                 });
             } 
             console.log(that.imgAllUrl); 
             var data = JSON.parse(JSON.stringify(that.imgAllUrl))
             console.log(data)
            } 
        }
    }
</script>

<style>
.upload_img_item{
    position: relative;
}

.upload_img_close{
    position: absolute;
    z-index: 999;
    right: 0;
    color:#fff;
    background: #DD524D;
}
.upload_img{
    width: 90px;
    height: 90px;
    display: block;
}     
</style>
public function uploadimages_file(){
    $folder = input('folder');
    $user_id = input('user_id');
    /* if(!model('user')->getUserIdInfo($user_id)){
         $this->error('用户不存在');
     }*/
    $files = request()->file();
    if(empty($files) || $files ==null){
        $this->error('请上传文件');
    }
    $imags = [];
    $errors = [];
    foreach($files as $file){
        if ($folder) {   //保存目录
            // 移动到框架应用根目录/public/uploads/ 目录下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . $folder);
            if ($info) {
                // 成功上传后 获取上传信息
                //echo $info->getFilename();
                // $path = '/uploads/editor/' . $info->getSaveName();
                $path = $folder. DS . $info->getSaveName();
                $fileName = str_replace('\\', '/', $path);
                array_push($imags, '/'.$fileName);
            } else {
                array_push($errors, $file->getError()); // 上传失败获取错误信息
            }
        }
    }
    if(!$errors){
        $msg['code'] = 1;
        $msg['data'] = $imags;
        return json($msg);
    }else{
        $msg['code'] = 0;
        $msg['data'] = $imags;
        $msg['msg'] = "上传出错";
        return json($msg);
    }
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值