表单上传文件—OSS上传文件(js)

最新推荐文章于 2024-08-23 17:33:19 发布

不可不戒、

最新推荐文章于 2024-08-23 17:33:19 发布

阅读量2.9k

点赞数 1

分类专栏：基础文章标签： js文件上传表单提交 vue.js OSS上传

本文链接：https://blog.csdn.net/weixin_42551395/article/details/86678283

版权

本文探讨了两种文件上传方式：原始表单提交和阿里云OSS上传。对于大文件或高效率需求，推荐使用OSS，结合Vue.js和element-UI的上传组件，能提供快速且优化的用户体验。OSS上传可以有效减少带宽占用，提高上传速度。

摘要由CSDN通过智能技术生成

关于(文件上传)表单提交的方案(原生js 方案)：
少说话：直接看代码（建议使用OSS上传）

原始的表单提交

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest上传文件</title>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />

<script type="text/javascript">
    //图片上传
    var xhr;
    //上传文件方法
    function UpladFile() {
   
        var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
        var url =  "http://localhost:9005" + "/RT-xxx/xxx/xxx/uploadMobFile"; // 接收上传文件的后台地址

        var form = new FormData(); // FormData 对象
        form.append("file", fileObj); // 文件对象
        form.append("fileType", 0);
        xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
        xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.onload = uploadComplete; //请求完成
        xhr.onerror =  uploadFailed; //请求失败

        xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
        xhr.upload.onloadstart = function(){
   //上传开始执行方法
            ot = new Date().getTime();   //设置上传开始时间
            oloaded =