• vue iview处理图片上传


    首先安装iview

    在main.js

    import ViewUI from 'view-design';
    import 'view-design/dist/styles/iview.css';

    Vue.use(ViewUI);

    <template>
    <div class="hello">
    <ul>
    <div class="demo-upload-list" v-for="item in uploadList">
    <template v-if="item.status === 'finished'">
    <img :src="item.url">
    <div class="demo-upload-list-cover">
    <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
    </div>
    </template>
    <template v-else>
    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
    </template>
    </div>
    <Upload
    ref="upload"
    name="image"
    :show-upload-list="false"
    :default-file-list="defaultList"
    :on-success="handleSuccess"
    :format="['jpg','jpeg','png']"
    :max-size="2048"
    :on-format-error="handleFormatError"
    :on-exceeded-size="handleMaxSize"
    :before-upload="handleBeforeUpload"
    multiple
    type="drag"
    :action="actiourl"
    style="display: inline-block;58px;">
    <div style=" 58px;height:58px;line-height: 58px;" >
    <Icon type="ios-camera" size="20"></Icon>
    </div>
    </Upload>
    <Modal title="View Image" v-model="visible">
    <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style=" 100%">
    </Modal>
    </ul>
    </div>
    </template>

    <script>
    export default {
    data () {

    return {
    defaultList: [
    {
    'name': 'a42bdcc1178e62b4694c830f028db5c0',
    'url': 'https://p.ssl.qhimg.com/dmfd/400_300_/t01bd3f1096c6fe647f.jpg'
    },

    ],
    imgName: '',
    visible: false,
    uploadList: [],这是上传的地址
    actiourl:"uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu"
    }
    },
    methods: {
    handleView (name) {
    this.imgName = name;
    this.visible = true;
    },
    handleRemove (file) {
    const fileList = this.$refs.upload.fileList;
    this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
    },
    handleSuccess (res, file) {
    console.log(res)
    console.log(file)
    file.url = res.data.imgUrl;
    file.name = '7eb99afb9d5f317c912f08b5212fd69a';
    },
    handleFormatError (file) {
    this.$Notice.warning({
    title: 'The file format is incorrect',
    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
    });
    },
    handleMaxSize (file) {
    this.$Notice.warning({
    title: '超出图片限制',
    desc: '图片太大,不超过M'
    });
    },
    handleBeforeUpload () {
    const check = this.uploadList.length < 2;
    if (!check) {
    this.$Notice.warning({
    title: '最多可上传2张图片.'
    });
    }
    return check;
    }
    },
    mounted () {
    this.uploadList = this.$refs.upload.fileList;
    }
    }
    </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
    font-weight: normal;
    }
    ul {
    list-style-type: none;
    padding: 0;
    }
    li {
    display: inline-block;
    margin: 0 10px;
    }
    a {
    color: #42b983;
    }

    .demo-upload-list{
    display: inline-block;
    60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
    }
    .demo-upload-list img{
    100%;
    height: 100%;
    }
    .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
    }
    .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
    }
    </style>

  • 相关阅读:
    从.NET到Mono-记Kooboo CMS对Mono的兼容历程:二、大小写敏感问题,到处都是地雷
    发布NBear.Mapping 开源通用映射组件 V1.0.1.8 beta
    发布支持代理,以及解决登录可能出现异常的DotMSN(强烈建议改用MSNPSharp来开发)
    LumaQQ.NET 2008 更新
    从.NET到Mono-记Kooboo CMS对Mono的兼容历程:三、平台的兼容性
    网站架构资料收集整理 Virus
    项目团队技术个人(提拔篇) Virus
    [翻译].NET框架中的缓存 Virus
    培养我们的目标感 Virus
    使用Django来处理对于静态文件的请求 Virus
  • 原文地址:https://www.cnblogs.com/xzhce/p/12942259.html
Copyright © 2020-2023  润新知