基于vue-Ant实现图片上传

尔嵘bobo 2023-03-28 原文

引言：

上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。如何使用Ant-design-vue中的 a-upload 上传组件进行图片或者视频的上传呢？

正文：

1.template中:

<a-form-model-item label="图片" prop="sheetPicture">
    <div style="display: flex; align-items: center">
        <a-upload name="avatar" class="avatar-uploader" action :customRequest="uploadImage" list-type="picture-card" :file-list="fileList" :show-file-list="false" :before-upload="beforeUpload" :remove="handleDeleteChange" accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG,.gif,.GIF">
            <div v-if="!defectSearchForm.sheetPicture">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
            </div>
            <img v-else :src="defectSearchForm.sheetPicture" alt="avatar" />
        </a-upload>
        <a-tooltip placement="right">
            <template slot="title">
                <span>上传前请确认无误后再进行上传或删除操作</span>
            </template>
            <a-icon type="info-circle" />
        </a-tooltip>
     </div>
</a-form-model-item>

2.js中：

定义data：

data(){
    return {
        loading: false,
        fileList: [],
        defectSearchForm: {},
 
    }
}

详情信息获取：

//根据id查询缺陷详情 (根据id获取详情的API getDefectSearchById)
    getDefectSearchInfoById(id) {
      let _this = this;
      getDefectSearchById(id)
        .then(({ data: res }) => {
          if (res.code != 0) {
            _this.$message.config({
              maxCount: 1,
            });
            _this.$message.destroy();
            return _this.$message.error(res.data);
          }
          console.log('缺陷详情', res);
          if (JSON.stringify(res.data) != '{}') {
            _this.defectSearchForm = res.data;
            if (_this.defectSearchForm.sheetPicture) {
              _this.fileList = [
                {
                  uid: '-1',
                  name: 'image.png',
                  status: 'done',
                  url: _this.defectSearchForm.sheetPicture
                }
              ];
            } else {
              _this.fileList = [];
            }
          }
        })
        .catch((error) => {
          console.log(error);
          return false;
        });
    },

图片上传部分：

//图片上传(上传图片API updateImage: '/sys/oss/upload')
    uploadImage(file) {
      let _this = this,
        data = file.file,
        fileParams = new FormData();
      _this.loading = true;
      fileParams.append('file', data);
      console.log('fileParams', fileParams);
      updateImage(fileParams).then(({ data: res }) => {
        if (res.code != 0) {
          _this.loading = false;
          return _this.$message.error(res.msg);
        }
        _this.defectSearchForm.sheetPicture = 'http://' + res.data.src;
        _this.loading = false;
      });
    },
 
    beforeUpload(file) {
      const isType = file.type === 'image/jpeg' || 'image/png' || 'image/jpg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isType) {
        this.$message.config({
          maxCount: 1,
        });
        this.$message.destroy();
        this.$message.error('图片格式错误,请上传图片!');
      }
      if (!isLt2M) {
        this.$message.config({
          maxCount: 1,
        });
        this.$message.destroy();
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isType && isLt2M;
    },
 
    // 删除项目图片(删除图片API deleteImage: '/sys/oss/delete')
    handleDeleteChange(file) {
      console.log('图片删除');
      console.log('file',file);
      let deletePlantInfoImgurl = file.url.substr(file.url.lastIndexOf('/') + 1);
      deleteFile(deletePlantInfoImgurl).then((res) => {
         if (res.code != 0) {
           return this.$message.error(res.data || res.msg);
         }
         this.plantInfo.imgurl = '';
         this.fileList = [];
         this.$message.success('删除成功');
         return;
       });
    },

3.效果：

如果你要实现大图预览的话：

previewVisible: false,
previewImage: '',

<a-upload name="avatar" class="avatar-uploader" action @preview="handlePreview" :showUploadList="false" :customRequest="uploadImage" list-type="picture-card" :file-list="fileList" :show-file-list="false" :before-upload="beforeUpload" :remove="handleDeletePlantImageChange" accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG,.gif,.GIF">
    <div v-if="!defectSearchForm.sheetPicture">
      <a-icon type="plus" />
      <div class="ant-upload-text">上传</div>
    </div>
    <img v-else :src="defectSearchForm.sheetPicture" class="avatar" />
</a-upload>
<!-- 此处添加预览，注意 :showUploadList="true" 预览才能使用 -->
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
    <img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>

    //预览图片
    async handlePreview(file) {
      console.log('file',file)
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
 
    //取消预览
    handleCancel(){
      this.previewVisible = false;
    },

其中 :showUploadList="false" 是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon。此时预览和删除功能消失，如果想更换图片，直接点击即可！

总结：

当然，代码肯定不能完全拿来用，可以参考某一部分，这个上传的图片是保存到了第三方的存储平台拿的url，具体看你自己需求吧,希望能给你带来帮助！

有关基于vue-Ant实现图片上传的更多相关文章

ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2
我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？最佳答案虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的
ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2
我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden
ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2
我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？最佳答案对于“文本”数
ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？最佳答案参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2
我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。关于ruby-on-r
叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2
华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o
基于C#实现简易绘图工具【100010177】 - 2
C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.
STM32读取串口传感器数据（颗粒物传感器，主动上传） - 2
文章目录1.开发板选择*用到的资源2.串口通信（个人理解）3.代码分析（注释比较详细）1.主函数2.串口1配置3.串口2配置以及中断函数4.注意问题5.源码链接1.开发板选择我用的是STM32F103RCT6的板子，不过代码大概在F103系列的板子上都可以运行，我试过在野火103的霸道板上也可以，主要看一下串口对应的引脚一不一样就行了，不一样的就更改一下。*用到的资源keil5软件这里用到了两个串口资源，采集数据一个，串口通信一个，板子对应引脚如下：串口1，TX：PA9，RX：PA10串口2，TX：PA2，RX：PA32.串口通信（个人理解）我就从串口采集传感器数据这个过程说一下我自己的理解，
MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

基于vue-Ant实现图片上传

引言：

正文：

1.template中:

2.js中：

3.效果：

总结：

有关基于vue-Ant实现图片上传的更多相关文章

随机推荐