JavaScript进阶 九 JS实现本地文件上传至阿里云服务器

               

JS实现本地文件上传至阿里云服务器

前言

      在前面的博客《 JavaScript进阶(八)JS实现图片预览并导入服务器功能》(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作。这次需要实现将本地打包好的文件上传至阿里云服务器。使用前面的图片文件上传方法无法完成此操作。操作界面如下:

 

思路

      本地与服务端传输文件的格式应该是熟悉的Base64格式。首先需要将本地文件转换为Base64格式,传输至服务端后,在服务端再将Base64格式的文件转换为原始文件。

源码解析

控制器

/*--------------移动APP版本管理G030 G031-------------------------*/medModule.controller('VersionController',function($scope, $http){$scope.queryFun = function() {
   try{appCallServer($http,"G030",{
   "mangid":localStorage.mangid},//success functionfunction(data){$scope.currentVersion = data.version;},//fail functionfunction(data){
   //alert("未找到记录:"+data.errtext);});}catch(error){alert("G030:"+error.message);}};$scope.queryFun();// 上传文件$scope.doTx = function() {
   var appBase64 = document.getElementById("appBase64").innerHTML; // 获取文件Base64编码内容var sunny = document.getElementById(
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在网页上实现上传本地文件至腾讯云,需要使用腾讯云的对象存储服务 COS,并且需要用到 COS 的 JavaScript SDK。以下是一个基本的上传示例: 1. 在腾讯云 COS 控制台创建存储桶,并获取存储桶的名称和访问密钥 ID 和密钥。 2. 在 HTML 中添加一个文件上传的表单: ```html <form> <input type="file" id="file-input"> <button type="submit" id="upload-btn">上传</button> </form> ``` 3. 在 JavaScript 中,引入 COS SDK 并初始化: ```javascript const COS = require('cos-js-sdk-v5'); const cos = new COS({ SecretId: 'your-secret-id', SecretKey: 'your-secret-key', }); ``` 4. 监听表单提交事件,获取上传的文件并调用 COS SDK 的 `putObject` 方法上传: ```javascript const form = document.querySelector('form'); const fileInput = document.querySelector('#file-input'); const uploadBtn = document.querySelector('#upload-btn'); form.addEventListener('submit', (e) => { e.preventDefault(); const file = fileInput.files[0]; const key = file.name; cos.putObject({ Bucket: 'your-bucket-name', Region: 'your-bucket-region', Key: key, Body: file, }, (err, data) => { if (err) { console.error(err); } else { console.log(data); } }); }); ``` 其中 `Bucket` 是存储桶名称,`Region` 是存储桶所在的地区,`Key` 是文件名,`Body` 是文件对象。 需要注意的是,由于腾讯云 COS 支持跨域上传,因此可以直接在前端使用 JavaScript 上传文件。不过这种方式需要将密钥直接暴露在前端代码中,存在安全风险,因此建议在服务端实现上传,并通过 API 提供给前端调用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值