<input id="file" type="file" name="name" @change="aaa"></input>

aaa(files){
var docFile=document.getElementById("file").files[0]//IE10以下不支持
console.log('files',docFile)

let formdata=new FormData()
  formdata.append('files',docFile)
this.axios.post(this.$API.AddFiles,formdata).then((res)=>{
console.log(res)
}).catch((err)=>{
console.log(err)
})
}

js简单的图片上传的更多相关文章

  1. UEditor之实现配置简单的图片上传示例

    UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...

  2. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  4. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  5. 原生JS实现异步图片上传(预览)

    效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...

  6. 阿里云使用js 实现OSS图片上传、获取OSS图片列表、获取图片外网访问地址(读写权限私有、读写权限公共);

    详情请参考:https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.763.ZgC59a 或者https://h ...

  7. 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

    项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...

  8. js canvas压缩图片上传

    $('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...

  9. koa2实现简单的图片上传

    1.安装koa-body 2.引入koa-body const koa = require('koa'); const fs = require('fs'); const koaBody = requ ...

  10. 纯JS实现多图片上传(在layui框架中)

    HTML代码 <form id="form1" class="layui-form layui-form-pane" action="{:url ...

随机推荐

  1. Python3 时间戳格式化和减法运算

    import datetime import time # 获取当前时间(2023-02-16 16:41:36) now_date = datetime.datetime.now().strftim ...

  2. Neo4j安装及简单使用【转】

    转载防丢失. 一.Neo4j和图数据库简介 neo4j是基于Java语言编写图形数据库.图是一组节点和连接这些节点的关系.图形数据库也被称为图形数据库管理系统或GDBMS. Neo4j的是一种流行的图 ...

  3. SQLServer中使用between查询日期

    SQL Server中字段是Datetime型 以" YYYY-MM-DD 00:00:00" 存放的 between and是包括边界值的,not between不包括边界值,不 ...

  4. 关于JMeter WebSocket插件:JMeter WebSocket插件-关闭SignalR连接--webSocket Close报错

    在浦发银行的项目中,主机运维连接成功不做任何操作的场景中,用到了webSocket协议,但是脚本运行中出现webSocke Close报错--解决方案:在webSocket Open Connecti ...

  5. Git下载、安装与配置

    1.Git下载:   访问Git官网,下载对应操作系统的的安装包.   这里笔者是64位机器,选择如下: 2.Git安装:   打开安装包进行安装:   一路next到Finish:   在CMD中输 ...

  6. RabbitMQ的安装(linux版)

    原文地址:https://blog.csdn.net/jiguquan3839/article/details/91346261 注意:在web管理页面登录提示"User can only ...

  7. 沁恒蓝牙系列芯片USB烧录故障排查

    目录 使用USB烧录时让ISP工具能够识别芯片的操作是按住评估板上的"Download"按键,或者将PB22短接到GND,同时给板子上电.若是第一次拿到芯片,codeflash中是 ...

  8. kubernetes service服务发现两种方式

    service服务发现ClusterIP方式 1.暴露deployment服务 kubectl expose deployment nginx4 --port=8000 --target-port=8 ...

  9. 【c#】csharp_learn

    csharp learn JSON C#解析JSON字符串总结 https://www.cnblogs.com/nc923/p/11418583.html c#解析json字符串处理(最清晰易懂的方法 ...

  10. Locust fasthttplocust客户端环境搭建

    1.下载地址:https://github.com/locustio/locust2.python setup.py install3.在执行目录中将安装完成的locust文件夹替换至原本pip下的原 ...