精华内容
下载资源
问答
  • Form表单由于方便的原因,我们上传二进制文件一般会使用form表单来提交。...所以最终还是采用下面这种方法同时上传多个文件第二次时使用:tip: input文件选择框的[0]里面存所选file文件,是数组。window.onload =...

    Form表单

    由于方便的原因,我们上传二进制文件一般会使用form表单来提交。

    但是之前都是单个文件上传,现在需要同时上传多个二进制文件,所以来研究一下。

    第一次时使用:

    TIPS:选择文件时按CRTL进行多选

    然鹅这个form表单的默认跳转有点头疼。所以最终还是采用下面这种方法同时上传多个文件

    第二次时使用:

    tip: input文件选择框的[0]里面存所选file文件,是数组。

    window.onload = function() {

    let uploadFiles = $("#upload")[0].files;

    let otherParams = ""

    let form = new FormData();

    form.append('otherParams', otherParams);

    for (i in uploadFiles) {

    // 由于form表单的数据是绑定在name属性上的,而name可以多个相同(不像对象的键)

    form.append("uploadFile", uploadFiles[i])

    };

    let config = {'你的配置项,已经声明数据是formData,此时可以不用配置,可以配置请求头之类的信息'}

    axios.post("/xxx/xx", form,config).then(res => {

    // 此时后台的Request对象中的files包含了前端上传的单个或多个二进制文件

    }).catch(err => {

    })

    }

    为什么提交文件时需要使用formdata呢?

    form表单数据能根据用户所选的 文件地址,当submit会根据这个地址去本地找文件然后上传. 所以你看到的form里面的数据只有一个路径...

    展开全文
  • 阿里云OSS提供了有两种上传文件的方式。//通过multipart上传文件function upload_by_multi_part($obj){$bucket = 'phpsdk1349849394';$object = 'Mining.the.Social.Web-'.time().'.pdf'; //英文$filepath = "D:\\...

    阿里云OSS提供了有两种上传文件的方式。

    //通过multipart上传文件

    function upload_by_multi_part($obj){

    $bucket = 'phpsdk1349849394';

    $object = 'Mining.the.Social.Web-'.time().'.pdf';  //英文

    $filepath = "D:\\Book\\Mining.the.Social.Web.pdf";  //英文

    $options = array(

    ALIOSS::OSS_FILE_UPLOAD => $filepath,

    'partSize' => 5242880,

    );

    $response = $obj->create_mpu_object($bucket, $object,$options);

    _format($response);

    }

    //通过multipart上传整个目录

    function upload_by_dir($obj){

    $bucket = 'phpsdk1349849394';

    $dir = "D:\\alidata\\www\\logs\\aliyun.com\\oss\";

    $recursive = false;

    $response = $obj->create_mtu_object_by_dir($bucket,$dir,$recursive);

    var_dump($response);

    }

    有两种方案:

    1.一种是上传一个单个文件,当服务器收到N个文件,通过第一个函数分N次上传。

    2.第二种是我把多个文件从临时目录转移到一个临时文件下,通过第二个函数,一次性上传!但是觉得这样很麻烦,既要创建一个新的文件夹,保存上传的文件,上传结束以后还要做删除。

    这两种那种好?如果第二种好,能直接在上传的时候就直接给N个临时文件一个独有的临时目录么?

    还没考虑上传失败的处理。

    第一种方案可以上传一个标记一个,第二种方案上传失败了是全部重来还是其他?

    另:没看到第二种方案的优势在哪里。如果不是打包上传,第二种方案跟第一种有何区别?

    综上,第一种方案比较稳;第二种方案要考虑的太多,也没有带来多少便利,得不偿失。

    展开全文
  • 以下是本人在写一通用的sftp\ftp上传脚本(带检查和重试功能)时碰到的问题,问过度娘,没有好的解决办法,后来自己解决的,特共享出来,供大家参考。 以下内容是在linux环境进行过验证,AIX下应该是通用。如果有...

    以下是本人在写一个通用的sftp\ftp上传脚本(带检查和重试功能)时碰到的问题,问过度娘,没有好的解决办法,后来自己解决的,特共享出来,供大家参考。

    以下内容是在linux环境进行过验证,AIX下应该是通用。如果有描述不对的地方,请友好提出,不要口吐芬芳,谢谢。

    由于办公电脑无法连外网,以下是通过个人电脑纯手工敲打。只做参考,使用时,可将变量都通过变量传入。

    1. 简单办法 sftp 获取远程ls信息到本地:

     shell中通过函数的方式,将远程ls内容输出到本地,然后通过grep -v 进行加工去掉不必要的数据,得到最后的 ftpinfo.tmp

    sftpGetLsInf()
    {
    sftp_ls()
    {
        sftp  user@127.0.0.1 <<EOF
            cd  tmp
            ls -l test.txt
            exit
    EOF
    }
    
        sftp_ls 2>&1 > ./ftpinfo.tmp0
        grep -v 'sftp>' ./ftpinfo.tmp0 > ./ftpinfo.tmp
        rm -f ./ftpinfo.tmp0
    
    }

    ftp就好说了,直接 mdir  test.txt ./localdir/ftpinfo.tmp  即可将 test.txt详细信息缓存到本地ftpinfo.tmp文件中

     

    2. sftp是否能批量上传文件?

    答: 没办法通过 put  a.txt  b.txt   或者 mput a.txt  b.txt  上传多个明确的文件。这样只会将a.txt上传后改名成b.txt。

    但可以 mput *.txt  这样通过通配符上传多个文件

     

    3. ftp 是否能批量上传文件?

    答: ftp 可以通过 mput  a.txt  b.txt 或者  mput  *.txt 上传多个文件。

    ftp中 put  a.txt  b.txt 和sftp一样,也会将a.txt上传后改名成b.txt

    展开全文
  • element-ui多文件上传的实现示例

    千次阅读 2021-01-14 15:25:08
    上传方案一:先将文件上传到七牛,再将七牛上传返回的文件访问路径上传到服务器class="upload-music"ref="upload"action=...

    上传方案一:

    先将文件上传到七牛,再将七牛上传返回的文件访问路径上传到服务器

    class="upload-music"

    ref="upload"

    action="http://up-z2.qiniup.com/"

    :data="{token:uploadToken}"

    multiple

    accept=".mp3"

    :before-upload="uploadBefore"

    :on-change="uploadChange"

    :on-success="uploadSuccess"

    :on-error="uploadError">

    选取文件

    仅支持上传mp3文件,文件大小不超过500M

    上传到服务器

    export default {

    name: 'uploadMusic',

    data() {

    return {

    headers: {},

    uploadToken: null,

    canUploadMore: true,

    fileList: null,

    }

    },

    created() {

    this.headers = {} //此处需要与server约定具体的header

    this.getUploadToken()

    },

    methods: {

    //获取上传七牛token凭证

    getUploadToken() {

    this.$http.get('xxxxxxx', {headers: this.headers}).then(response => {

    if (response.data.status == 200) {

    let resp = response.data.data

    this.uploadToken = resp.token

    } else {

    this.$message({

    message: '获取凭证失败,请重试',

    type: 'error'

    })

    }

    })

    },

    //获取音频文件时长

    getVideoPlayTime(file, fileList) {

    let self = this

    //获取录音时长

    try {

    let url = URL.createObjectURL(file.raw);

    //经测试,发现audio也可获取视频的时长

    let audioElement = new Audio(url);

    let duration;

    audioElement.addEventListener("loadedmetadata", function (_event) {

    duration = audioElement.duration;

    file.duration = duration

    self.fileList = fileList

    });

    } catch (e) {

    console.log(e)

    }

    },

    //校验上传文件大小

    uploadChange(file, fileList) {

    this.fileList = fileList

    let totalSize = 0

    for (let file of fileList) {

    totalSize += file.raw.size

    }

    if (totalSize > 500 * 1024 * 1024) {

    this.canUploadMore = false

    this.$message({

    message: '上传文件不能不超过500M',

    type: 'warn'

    })

    } else {

    this.canUploadMore = true

    }

    },

    uploadBefore(file) {

    if (this.canUploadMore) {

    return true

    }

    return false

    },

    //上传成功

    uploadSuccess(response, file, fileList) {

    this.getVideoPlayTime(file, fileList)

    },

    //上传失败

    uploadError(err, file, fileList) {

    console.log(err)

    },

    //上传服务器数据格式化

    getUploadMusicList() {

    let musicList = []

    for (let file of this.fileList) {

    if (file.response && file.response.key) {

    musicList.push({

    "play_time": file.duration, //播放时长

    "size": file.size/1024, //文件大小 单位 kb

    "song_name": file.name, //歌曲名

    "voice_url": "xxxx" //上传七牛返回的访问路径

    })

    }

    }

    return musicList

    },

    //上传至服务器

    submitUpload() {

    let musicList = this.getUploadMusicList()

    this.$http.post('xxxxxxxxxx', {music_list: musicList}, {headers: this.headers}).then(response => {

    if (response.data.status == 200) {

    this.$refs.upload.clearFiles() //上传成功后清空文件列表

    this.$message({

    message: '上传服务器成功',

    type: 'success'

    })

    } else{

    this.$message({

    message: '上传服务器失败,请重试',

    type: 'error'

    })

    }

    }).catch(err => {

    this.$message({

    message: '上传服务器失败,请重试',

    type: 'error'

    })

    })

    },

    }

    }

    上传方案二:

    直接将文件上传到服务器

    class="upload-music"

    ref="upload"

    multiple

    action=""

    :auto-upload="false"

    :http-request="uploadFile">

    选取文件

    上传到服务器

    只能上传mp3文件,且单次不超过500M

    export default {

    name: 'uploadMusic',

    data() {

    return {

    fileType:'video',

    fileData: new FormData(),

    headers:{},

    }

    },

    补充:element-ui实现多文件加表单参数上传

    element-ui是分图片多次上传,一次上传一个图片。

    如果想一次上传多个图片,就得关掉自动上传:auto-upload=‘false',同时不使用element内置上传函数,换成自己写的onsubmit()

    为了实现图片的添加删除,可在on-change与on-remove事件中取得filelist(filelist实质就是uploadFiles的别名,而uploadFiles就是element内置的用于保存待上传文件或图片的数组),在最后一步提交的过程中,将filelist中的值一一添加到formdata对象中(formdata.append()添加,formdata.delete()删除),然后统一上传。

    ps:on-preview事件和组件以及对应属性、方法这一体系是用来实现图片的点击放大功能。被注释掉的beforeupload只有一个实参,是针对单一文件上传时使用到的,这里无法用上

    action="http://127.0.0.1:8000/api/UploadFile/"

    list-type="picture-card"

    :auto-upload="false"

    :on-change="OnChange"

    :on-remove="OnRemove"

    :on-preview="handlePictureCardPreview"

    :before-remove="beforeRemove"

    >

    点击查看filelist

    提交

    import {host,batchTagInfo} from '../../api/api'

    export default {

    data() {

    return {

    param: new FormData(),

    form:{},

    count:0,

    fileList:[],

    dialogVisible:false,

    dialogImageUrl:''

    };

    },

    methods: {

    handlePictureCardPreview(file) {

    this.dialogImageUrl = file.url;

    this.dialogVisible = true;

    },

    beforeRemove(file, fileList) {

    return this.$confirm(`确定移除 ${ file.name }?`);

    },

    OnChange(file,fileList){

    this.fileList=fileList

    },

    OnRemove(file,fileList){

    this.fileList=fileList

    },

    //阻止upload的自己上传,进行再操作

    // beforeupload(file) {

    // console.log('-------------------------')

    // console.log(file);

    // //创建临时的路径来展示图片

    // //重新写一个表单上传的方法

    // this.param = new FormData();

    // this.param.append('file[]', file, file.name);

    // this.form={

    // a:1,

    // b:2,

    // c:3

    // }

    // // this.param.append('file[]', file, file.name);

    // this.param.append('form',form)

    // return true;

    // },

    fun(){

    console.log('------------------------')

    console.log(this.fileList)

    },

    onSubmit(){

    this.form={

    a:1,

    b:2,

    c:3

    }

    let file=''

    for(let x in this.form){

    this.param.append(x,this.form[x])

    }

    for(let i=0;i

    file='file'+this.count

    this.count++

    this.param.append(file,this.fileList[i].raw)

    }

    batchTagInfo(this.param)

    .then(res=>{

    alert(res)

    })

    }

    }

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 多文件上传以及java后台接受

    千次阅读 2021-02-05 08:13:54
    最近项目用到的,实现多文件以及一些...上传文件首先解释下action中的地址为我后台接受文件的地址,因为上传文件,所以enctype="multipart/form-data"是必须的同时选择多个文件上传,不使用各种控件的话,把multiple...
  • public async Task<IActionResult> TestGoods(IFormFileCollection files) { var result = new List<string>(); var baseFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Tests");
  • 多文件上传以及Java后台接受

    千次阅读 2021-01-13 01:43:18
    最近项目用到的,实现多文件以及一些...上传文件首先解释下action中的地址为我后台接受文件的地址,因为上传文件,所以enctype="multipart/form-data"是必须的同时选择多个文件上传,不使用各种控件的话,把multiple...
  • 您好我正在开发多个文件上传模块在angularjs作为前端。我正在使用FormData发送文件。因此,它是多个文件上传我循环通过文件和附加文件FormData。除此之外,我还发送了一个额外的参数。POSTMAN文件上传与多个键var ...
  • element-ui upload组件 实现多文件上传element-ui upload组件 实现多文件上传需求:我司要求实现多文件上传,且要求使用formData传递参数。环境:vue+element-ui+axios实现:1. 使用element-ui upload组件搭建上传...
  • 今天接到一任务是要写一个上传文件同时还带有一json数据的请求接口。先来分析一下,后端需要两参数,一参数用来接收上传文件,另一参数用来接收json数据。后端接收文件可以采用MultipartFile来接收,json...
  • 描述:(1)jdk自带线程池见 JDK自带线程池配置(2)此上传文件服务器中上传文件的后缀名通过第一段缓冲字符流传递,此缓冲字符流大小为1024,在文件接收端以1024接收、处理。1、服务器代码如下(使用jdk自带线程池):1 /...
  • ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后台系统的服务器压力,因此只能前端代码做修改,使得多个文件上传只请求1次后台接口。...
  • 配置文件form表单java后台 接受示例@RequestMapping("xxx")public String fileImgSave(@RequestParam("filename") MultipartFile[] files,HttpServletRequest request){//保存文件的路径String realPath = request....
  • 选取多个文件的快捷键

    万次阅读 2021-07-27 05:20:05
    以电脑为例,选取多个文件的快捷键有:1、如果是多个文件,而只需要选择其中几个,可以按住CTRL键不放手,然后在需要的文件名上点击鼠标左键,选择完成后松开CTRL键。2、如果是多个文件,需要按顺序选取,可以在要...
  • 打印出来看看docFile 3.png 可以看到,我们的form.docFile,和我们现在打印出来的formData的docFile不一样, formData里面是File[]数组 可以用 MultipartFile[] 接收到 结论 使用 formData 来实现多文件一次性上传 ...
  • scp或sftp使用单个命令复制多个文件

    千次阅读 2021-05-15 22:26:24
    scp或sftp使用单个命令复制多个文件我想将文件从/向远程服务器复制到不同的目录中。例如,我想一次运行这4个命令。scp remote:A/1.txt local:A/1.txtscp remote:A/2.txt local:A/2.txtscp remote:B/1.txt local:B/1....
  • HDFS一个文件出现多个小文件的问题

    千次阅读 2021-11-15 13:49:40
    在采集数据的时候一个文件上传到HDFS的文件发现都是小文件 原因是hadoop的组件NamaNode出现问题 导致出现小文件得到错误 解决方法: 1. 将服务器上的Hadoop根目录中 data/ logs 两个文件删除 rm -rf data/ logs/ ...
  • springboot+elementUI 多文件上传代码htmljs后台图 代码 下面展示一些 内联代码片。 html <el-upload class="upload-demo" ref="upload" :limit="3" :multiple="true" accept=".doc, .docx, .xls, .xlsx, .ppt, ...
  • 摘要:通常情况下,我们上传文件是借助 type= "file " 的 input 标签来完成的,但非常遗憾的是,它不能很好地与其它表单元素并存,而layui则是通过“异步上传”来实现文件上传的,即先让文件上传,再和其它表单一起...
  • PostMan一次性上传多个文件

    千次阅读 2021-12-06 09:56:47
    场景:需要从本地一次性上传多张图片导入到数据库,或者在本地调试一次性上传多个文件到后台
  • 有读者问:那么如果有多个文件要同时上传呢?这就马上奉上,当碰到多个文件要同时上传的处理方法。 动手试试 本文的动手环节将基于Spring Boot中实现文件的上传一文的例子之上,所以读者可以拿上一篇的例子作为基础...
  • 上传多个文件,只要一个属性files 为数组格式 这个时候我们只需要 let FormData = new FormData() FormData.append("files", 选择的文件) FormData.append("files", 选择的文件) FormData.append("files", 选择的...
  • 一、首先是通过api接收前端上传多个文件 def receive_resume_appendix(request): """ 接收简历附件 """ if request.method == 'POST': files = request.FILES.getlist('files') for f in files: ...
  • 最近接触一项目中用到文件上传并要求可以添加编辑上传的文件信息,将文件转成二进制流的方式传参给后端,并要求带有实时进度条 话不说,直接上效果图 页面代码 <template> <div> <p ...
  • 最近的项目中用到了element的upload组件,有这样的一个需求,需要一次性上传多张图片或者一次性上传多个文件,虽然element官网的组件提功了这样的一个上传组件,也有多选文件的属性【multiple 是否支持多选文件 ...
  • 多个文件上传时,需要逐个将文件参数添加到formData中,如 if (val.file) { val.file.map(x => formData.append('file', x.originFileObj)); } 后台的接口参数需写成 @PostMapping(value = "/uploadFile...
  • postman上传文件

    2021-01-12 00:23:20
    postman上传文件调接口,使用POST的form-data方式文件数据在后台方法中的HttpServletRequest中。①request中文件信息②其实request中不仅有文件信息,还有其他文本信息也在里面,只不过需要通过key获取到该json字符...
  • layui 给多个按钮绑定 文件上传事件

    千次阅读 2021-02-18 14:35:25
    其实会有一些小伙伴 不会注意到 layui人家是支持 根据类名实例化上传对象的 还是闲着没事看看文档比较好的 <button class="layui-btn layui-btn-radius layui-btn-primary" data-id="picture" id="picture" ...
  • 就需要用自定义上传用http-request方法,这时进度条就不显示了或者显示有问题,查了很资料大多数是针对单文件上传的,多文件上传几乎没有,于是自己决定实现一 一、 ui <el-upload ref="uploadMutiple" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 765,224
精华内容 306,089
关键字:

多个文件上传