七牛服务器怎么修改图片上传,七牛上传图片的了解与使用

在平时所做的小项目中,没有使用过七牛这样的第三方库来上传保存图片,一般都只是保存在服务器的电脑里。

例如,在修改个人信息的时候,上传图片和修改信息都是使用同一个接口。

// 获得请求管理者

AFHTTPRequestOperationManager *mgr = [AFHTTPRequestOperationManager manager];

// 发送GET请求

[mgr POST:url parameters:para constructingBodyWithBlock:^(id formData) {

UIImage *image = self.iconView.image;

NSData *data = UIImageJPEGRepresentation(image, 0.3);

//拼接文件参数

[formData appendPartWithFileData:data name:@"pic" fileName:@"status.jpg" mimeType:@"image/jpeg"];

} success:^(AFHTTPRequestOperation *operation, NSDictionary *resultDict) {

} failure:^(AFHTTPRequestOperation *operation, NSError *error) {

}];

在上传头像的同时把各种参数都传了上去。

当我看到七牛的时候一脸懵逼,这是什么意思,图片保存到七牛,那服务器怎么把图片和用户联系起来,或者说,当我访问我的信息的时候,服务器是怎么把我的头像在七牛那么多照片中挑出来给我的。

因为用七牛上传的代码是这样的:

[[RequestManager shareInstance] POST:@"getToken.aspx" parameters:qnParam success:^(NSURLSessionDataTask * _Nonnull task, id _Nullable responseObject) {

if ([responseObject[@"resultCode"] isEqual:@"0000"]) {

NSString *token = responseObject[@"data"][@"token"];

QNUploadManager *uploadManager = [[QNUploadManager alloc] init];

NSMutableArray *keys = [NSMutableArray array];

for (NSInteger i = 0; i < _images.count; i ++) {

NSData *data = [_images[i] rmk_resizedAndReturnData];

[uploadManager putData:data key:_keys[i] token:token complete:^(QNResponseInfo *info, NSString *key, NSDictionary *resp) {

[keys addObject:key];

if (keys.count == _images.count) {

!resultHandler ?: resultHandler(keys, nil);

}

} option:nil];

}

} else {

!resultHandler ?: resultHandler(nil, responseObject[@"resultMsg"]);

}

} failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {

!resultHandler ?: resultHandler(nil, error.description);

}];

上面的代码是使用七牛上传照片,可以看到是通过getToken.aspx接口获得token。

NSString *token = responseObject[@"data"][@"token"];

获得完token完以后再用七牛的方法传上去:

[uploadManager putData:data key:_keys[i] token:token complete:^(QNResponseInfo *info, NSString *key, NSDictionary *resp) {

[keys addObject:key];

if (keys.count == _images.count) {

!resultHandler ?: resultHandler(keys, nil);

}

} option:nil];

高潮来了,我发现,传上去一张,就会有一个key返回,其实这个key和 http://o79izl3a1.bkt.clouddn.com/ 拼接起来,就是这张图片的地址了。

所以,其实七牛的上传图片的流程是,把图片上传上去保存到七牛中,如果成功,他会返回你一个key,把key保存到参数的字典中,然后一起发给服务器,这样服务器就知道你的照片的路径了,下一次访问信息的时候,服务器直接给你照片路径,这样就解决了问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以回答你的问题。为了在ElementUI的Upload中使用云储存图片,你需要进行以下步骤: 1. 首先,你需要在七云上创建一个存储空间,并获取到你的Access Key和Secret Key。 2. 然后,在你的Vue项目中安装七云的SDK,可以使用npm命令进行安装: ``` npm install qiniu-js --save ``` 3. 在你的Vue组件中,你需要引入ElementUI的Upload组件,并添加一个自定义的上方法。这个方法将会在文件上时被调用: ```javascript <template> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :headers="headers" :data="data" :file-list="fileList" multiple> <el-button size="small" type="primary">点击上</el-button> </el-upload> </template> <script> import { Upload } from 'element-ui'; import Qiniu from 'qiniu-js'; export default { components: { Upload }, data() { return { fileList: [], token: '', key: '', domain: 'http://xxx.xxx.xxx.xxx/', headers: { 'Authorization': '', 'x-qiniu-url': '' }, data: { token: '', key: '' } }; }, methods: { beforeUpload(file) { // 获取上凭证 let that = this; return new Promise((resolve, reject) => { axios.get('YOUR_UPLOAD_URL') .then(response => { that.token = response.data.token; that.key = response.data.key; that.headers.Authorization = `UpToken ${that.token}`; that.headers['x-qiniu-url'] = that.domain; that.data.token = that.token; that.data.key = that.key; resolve(); }) .catch(error => { reject(error); }) }); }, handleSuccess(response, file, fileList) { // 上成功回调 console.log(response); }, handleError(error, file, fileList) { // 上失败回调 console.log(error); } } } </script> ``` 在这段代码中,我们引入了ElementUI的Upload组件和七云的SDK,然后在data中定义了一些变量,包括上凭证、上文件的key、七的域名、请求头和请求参数等。在beforeUpload方法中,我们向你的服务器请求上凭证,在请求成功后将认证信息和请求参数赋值给data和headers变量。在handleSuccess和handleError方法中,我们可以处理上成功和上失败的情况。 4. 最后,你需要在你的服务器端实现上凭证的生成。可以使用云的SDK,也可以使用其他语言的SDK,例如Java或Python。在服务器端生成上凭证后,将凭证和上文件的key返回给前端。 例如,在Node.js中,你可以使用qiniu-sdk: ```javascript const qiniu = require('qiniu'); const accessKey = 'YOUR_ACCESS_KEY'; const secretKey = 'YOUR_SECRET_KEY'; const bucket = 'YOUR_BUCKET_NAME'; const mac = new qiniu.auth.digest.Mac(accessKey, secretKey); const options = { scope: bucket, expires: 7200 }; const putPolicy = new qiniu.rs.PutPolicy(options); const uploadToken = putPolicy.uploadToken(mac); app.get('/uploadToken', (req, res) => { const key = req.query.filename; res.json({ token: uploadToken, key: key }); }); ``` 在这个例子中,我们使用qiniu-sdk生成上凭证,并在/uploadToken路由中返回凭证和上文件的key。 这样,你就可以在ElementUI的Upload中使用云存储图片了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值