“dzb”
2022-10-20 b654384fcaedb1d90c535d209778003d199aafa5
src/components/myUpload/index.vue
@@ -1,8 +1,19 @@
<template>
    <div class="my-upload">
        <el-upload :file-list="fileList" class="upload-demo" action="/sccg/file/medias" :multiple="multiple"
            :show-file-list="flag" :before-upload="beforeUpload" :limit="limit" :on-success="handleSuccess"
            :on-error="handleError" :list-type="listType" :headers="getToken()">
        <el-upload
        :file-list="fileList"
        class="upload-demo"
        action="/sccg/file/medias"
        :multiple="multiple"
        :show-file-list="flag"
        :before-upload="beforeUpload"
        :limit="limit"
        :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}">
                <i class="el-icon-plus"></i>
                <span>上传图片</span>
@@ -11,7 +22,6 @@
    </div>
</template>
<script>
export default {
    data() {
        return {
@@ -34,7 +44,6 @@
    methods: {
        // 上传之前回调
        beforeUpload(rawFile) {
            console.log(rawFile);
            if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {
                this.$message.error('图片必须是 jpg/svg/jpeg/png 格式!')
                return false
@@ -46,11 +55,26 @@
        },
        // 上传成功回调
        handleSuccess(res, file, filelist) {
            console.log(res);
            if(res.data.url1){
                this.$emit('setPictureUrl',{url:res.data.url1});
            }
            else if(res.data.url2){
                this.$emit('setPictureUrl',{url:res.data.url2});
            }
            else if(res.data.url3){
                this.$emit('setPictureUrl',{url:res.data.url3});
            }
            else{
                this.$emit('setPictureUrl',{url:res.data.url4});
            }
        },
        // 上传失败回调
        handleError(err, file, fileList) {
            console.log(err);
            this.$message({
                type:'error',
                message:err
            })
        },
        // 获取token
        getToken() {
@@ -59,10 +83,22 @@
            if (token && tokenHead) {
                return { Authorization: tokenHead + token }
            }
        },
        // 预览
        handlePreview(file){
            console.log(file)
        },
        // 移除文件
        handleRemove(file, fileList){
            console.log(file,fileList)
        }
    },
    props: {
        // 返回上传成功图片地址
        setPictureUrl:{
            type:Function,
            default:()=>{}
        }
    }
}
</script>