<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. C# 图片压缩(指定大小压缩和指定尺寸压缩)

    一按大小压缩测试代码: 一测试效果: 一主要代码: /// <summary> /// 压缩图片至200 Kb以下 /// </summary> /// <param n ...

  2. for循环当中的 var let区别

    首先要了解这里代码执行顺序: for循环同步:setTimeout异步: js在执行代码的过程中,碰到同步代码会依次执行,碰到异步代码就会将其放入任务队列中进行等待,当同步代码执行完毕后再开始执行异步 ...

  3. ARC157E XXYX Binary Tree 题解

    首先,条件可以抽象为 Y 不能相连,然后: 钦定根为 Y,YX 的个数加上 \(2\): 钦定某一个叶子节点为 Y,XY 的个数加上 \(1\): 钦定某一个非叶子非根节点为 Y,YX 的个数加上 \ ...

  4. Cannot invoke "java.sql.Connection.prepareStatement(String)" because "conn" is null问题解决

    HTTP状态 500 - 内部服务器错误 类型 异常报告 消息 Cannot invoke "java.sql.Connection.prepareStatement(String)&quo ...

  5. javascript中的二进制运算符

    javascript的二进制运算符用于直接对二进制位进行计算,好处是速度快,缺点是不直观. 位运算符只对整数起作用,如果一个运算子不是整数,则会转换成整数后再执行;我们都知道javascript的数值 ...

  6. 20192326杨沥凯 实验一《Linux基础与Java开发环境》实验报告

    20192326杨沥凯 2020-2021-1 <数据结构与面向对象程序设计>实验一报告 课程:<程序设计与数据结构> 班级: 1923 姓名: 杨沥凯 学号:20192326 ...

  7. QtQuick与Qml介绍

    文章纲要: 1.QtQuick是什么 2.qml与QtQuick关系 一.QtQuick是什么 "quick--快速创建应用程序" "quick--Qt User Int ...

  8. # HUAWEI--IPv6 over IPv4隧道配置(简单案例)

    HUAWEI--IPv6 over IPv4隧道配置(简单案例) 拓扑图 项目要求: PC3和PC4使用的IPv6的地址,路由和路由器之间的连接使用IPv4的地址并使用静态路由连接,路由器和PC机的连 ...

  9. centos安装Jenkins报错

    [SKIPPED] jenkins-2.249.3-1.1.noarch.rpm: Already downloaded warning: /var/cache/dnf/jenkins-0919f06 ...

  10. VirtualBox上使用qemu和busybear搭建RISCV环境

    Step 1:安装一些编译riscv需要的库: sudo apt-get install autoconf automake autotools-dev curl libmpc-dev libmpfr ...