zoukankan      html  css  js  c++  java
  • vue上传图片

    <el-form-item label="图片1" prop="img1">
            <el-input v-model="dataForm.img1" placeholder="图片1"></el-input>
            <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1"
                :on-exceed="handleExceed" :file-list="fileList1" :on-success="doc1" :on-error="handleAvatarError">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="图片2" prop="img2">
            <el-input v-model="dataForm.img2" placeholder="图片2"></el-input>
            <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1"
                :on-exceed="handleExceed" :file-list="fileList2" :on-success="doc2" :on-error="handleAvatarError">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <el-form-item label="图片3" prop="img3">
            <el-input v-model="dataForm.img3" placeholder="图片3"></el-input>
            <el-upload class="upload-demo" :action="imgUrl" :before-remove="beforeRemove" multiple :limit="1"
                :on-exceed="handleExceed" :file-list="fileList3" :on-success="doc3" :on-error="handleAvatarError">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
     export default {
        data () {
          return {
                    fileList1: [],
                    fileList2: [],
                    fileList3: [],
                    imgUrl: 'http://127.0.0.1:8080/renren-fast/uploads/local',
    handleAvatarError(res, file) {
                    this.$message.error('文件太大');
                },
                handleExceed(files, fileList) {
                    this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
                },
                doc1(res, file) {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    if (res.code == 0) {
                        this.dataForm.img1 = res.msg;
                    }
                },
                doc2(res, file) {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    if (res.code == 0) {
                        this.dataForm.img2 = res.msg;
                    }
                },
                doc3(res, file) {
                    this.$message({
                        message: '上传成功',
                        type: 'success'
                    });
                    if (res.code == 0) {
                        this.dataForm.img3 = res.msg;
                    }
                },
                beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${ file.name }?`);
                },
  • 相关阅读:
    在chrome中利用“油猴”为每个网页增加“返回顶部”功能
    EasyVS 0.3版本发布 给力变换vs编辑器主题
    python使用matplotlib绘图 barChart
    Automatic IE Testing With Python
    上网计时小助手
    关于在未安装frontpage 服务扩展的情况下创建web应用程序的问题
    申请加入了sharepoint团队
    Linq学习之旅——LINQ查询表达式
    使用 ASP.NET 创建的 XML Web 服务的概述
    用C#获取硬盘序列号,CPU序列号,网卡MAC地址
  • 原文地址:https://www.cnblogs.com/a1304908180/p/14948750.html
Copyright © 2011-2022 走看看