上传处置图片上传过程展示

wl

2022-10-26 3845699a34ceb448b4d47a82bb928bf83203dcaf

上传处置图片上传过程展示

 src/components/myUpload/index.vue

@@ -11,7 +11,6 @@
        :on-success="handleSuccess"
        :on-error="handleError" 
        :list-type="listType" 
        :on-preview="handlePreview" 
        :on-remove="handleRemove"
        :headers="getToken()">
            <div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}">
@@ -32,7 +31,7 @@
            // 多选
            multiple: false,
            // 限制
            limit: 50,
            limit: 4,
            // 按钮高度
            btnHeight: '120px',
            // 按钮宽度
@@ -90,7 +89,7 @@
        },
        // 移除文件
        handleRemove(file, fileList){
            console.log(file,fileList)
            this.$emit('delPictureUrl',{url:file.response.data.url1});
        }
    },
    props: {
@@ -98,6 +97,10 @@
        setPictureUrl:{
            type:Function,
            default:()=>{}
        },
        delPictureUrl:{
            type:Function,
            default:()=>{}
        }
    }
}

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/arrive/index.vue

@@ -25,19 +25,22 @@
                <!-- 现场情况照片 -->
                <el-form-item label="现场情况照片:" prop="situationPic">
                    <div class="upImg">
                        <div class="img-list" v-if="arrive.situationPic.length!==0">
                        <!-- <div class="img-list" v-if="arrive.situationPic.length!==0">
                            <div class="img" v-for="(item,index) in arrive.situationPic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index)"></i>
                            </div>
                        </div>
                        <div class="upload" v-if="arrive.situationPic.length<4">
                        </div> -->
                
                            <MyUpload @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
                    
                        <!-- <div class="upload" v-if="arrive.situationPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="50" :on-success="handleSuccess" list-type="picture" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        </div> -->
                        <div class="tip">{{arrive.situationPic.length}} / 4</div>
                    </div>
                </el-form-item>
@@ -46,7 +49,11 @@
    </div>
</template>
<script>
import MyUpload from "@/components/myUpload"
export default {
    components: {
        MyUpload
    },
    data() {
        const checkTime = (rule, value, callback) => {
            if (value) {
@@ -131,6 +138,21 @@
        // 删除图片
        handleRemove(index) {
            this.arrive.situationPic.splice(index,1);
        },
        // 设置上传成功之后的图片地址
        setPicUrl({ url }) {
            const baseUrl = 'http://140.143.152.226:8410/';
            if (this.arrive.situationPic.length < 4) {
                this.arrive.situationPic.push(baseUrl + url)
            }
            console.log(url);
        },
        //删除图片
        delPicUrl({url}){
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(url);
            this.arrive.situationPic.splice(this.arrive.situationPic.indexOf(baseUrl + url),1);
            console.log(this.arrive.situationPic);
        }
    },
    watch: {
@@ -169,15 +191,18 @@
        height: 60px;
        position: relative;
        display: flex;

        img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }

        .img{
            height: 60px;
            position: relative;
        }

        .myicon {
            position: absolute;
            top: 0px;

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/book/index.vue

@@ -89,19 +89,20 @@
                <!-- 整改后照片 -->
                <el-form-item label="整改后照片:" prop="rectifiedPic">
                    <div class="upImg">
                        <div class="img-list" v-if="book.rectifiedPic.length!==0">
                        <!-- <div class="img-list" v-if="book.rectifiedPic.length!==0">
                            <div class="img" v-for="(item,index) in book.rectifiedPic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index,3)"></i>
                            </div>
                        </div>
                        <div class="upload" v-if="book.rectifiedPic.length<4">
                        </div> -->
                        <!-- <div class="upload" v-if="book.rectifiedPic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess3" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        </div> -->
                        <MyUpload  @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
                        <div class="tip">{{book.rectifiedPic.length}} / 4</div>
                    </div>
                </el-form-item>
@@ -130,7 +131,11 @@
</template>
<script>
import {getCodeList} from '@/utils/helper'
import MyUpload from "@/components/myUpload"
export default {
    components: {
        MyUpload
    },
    data() {
        const checkKind = (rule, value, callback) => {
            if (value) {
@@ -346,6 +351,21 @@
            }

        },
            // 设置上传成功之后的图片地址
            setPicUrl({ url }) {
            const baseUrl = 'http://140.143.152.226:8410/';
            if (this.book.originalPic.length < 4) {
                this.book.originalPic.push(baseUrl + url)
            }
            console.log(url);
        },
        //删除图片
        delPicUrl({url}){
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(url);
            this.book.originalPic.splice(this.book.originalPic.indexOf(baseUrl + url),1);
            console.log(this.book.originalPic);
        },
        // 获取文书种类
        async getBookType(){
            let arr 

 src/views/operate/disposal/casepool/dispatch/updateUser/uploadResult/components/evidence/index.vue

@@ -38,19 +38,20 @@
                <!-- 照片附件 -->
                <el-form-item label="照片附件:" prop="pic">
                    <div class="upImg">
                        <div class="img-list" v-if="evidence.pic.length!==0">
                        <!-- <div class="img-list" v-if="evidence.pic.length!==0">
                            <div class="img" v-for="(item,index) in evidence.pic" :key="index">
                                <img :src="item" alt="">
                                <i class="el-icon-close myicon" @click="handleRemove(index)"></i>
                            </div>
                        </div>
                        <div class="upload" v-if="evidence.pic.length<4">
                        </div> -->
                        <MyUpload  @setPictureUrl="setPicUrl" @delPictureUrl="delPicUrl"></MyUpload>
                        <!-- <div class="upload" v-if="evidence.pic.length<4">
                            <el-upload :file-list="fileList" class="upload-demo"
                                action="/sccg/file/medias" multiple :show-file-list="false"
                                :limit="4" :on-success="handleSuccess2" :headers="getToken()">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        </div> -->
                        <div class="tip">{{evidence.pic.length}} / 4</div>
                    </div>
                </el-form-item>
@@ -151,7 +152,11 @@
<script>
import { getTypeList } from '@/utils/helper'
import {validateName,validatePhone,validateCardId} from '@/utils/validate'
import MyUpload from "@/components/myUpload"
export default {
    components: {
        MyUpload
    },
    data() {
        const checkName = (rule, value, callback) => {
            if (value) {
@@ -522,6 +527,21 @@
        // 获取民族列表
        async getNationList() {
            this.nationOptions = await getTypeList(1, '05');
        },
         // 设置上传成功之后的图片地址
         setPicUrl({ url }) {
            const baseUrl = 'http://140.143.152.226:8410/';
            if (this.evidence.pic.length < 4) {
                this.evidence.pic.push(baseUrl + url)
            }
            console.log(url);
        },
        //删除图片
        delPicUrl({url}){
            const baseUrl = 'http://140.143.152.226:8410/';
            console.log(url);
            this.evidence.pic.splice(this.evidence.pic.indexOf(baseUrl + url),1);
            console.log(this.evidence.pic);
        }
    },
    watch: {